/*
Theme Name: QA Immigration Services
Theme URI: https://example.com/my-theme
Text Domain: QA-Immigration
charset: utf-8
Author: Qadeer Awan
Author URI: https://example.com
Description: A Theme for the Qadeer Awan Immigration Services
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Clarity
Tags: custom, clean, minimal, responsive
*/

 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --dark : #6C3428;
    --mid : #BA704F;
    --ml : rgb(223, 168, 120);
    --light : rgb(206, 230, 243);
    --background:rgb(216, 214, 214);
}



em{
  font-weight:800;
  font-size:20px;
  font-style:inherit;
  
}

body {
  font-family: "Google Sans Flex" sans-serif;
  color:var(--dark);
}

h1 {
  font-size: 40px;
  font-weight: 400;
  font-variation-settings: "opsz" auto;
}

h2 {
  font-size: 22px;
  font-weight: 400;
  font-variation-settings: "opsz" auto;
}

h3, a {
  font-size: 20px;
  font-weight: 400;
  font-variation-settings: "opsz" auto;
}

a{
  color:white;
  text-decoration: none;
}

p { 
  font-size : 19px;
  line-height:1.8rem;

}

.modal{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  padding:1vh;
  background-color:#F5F5F5;
}



.search-form.search-form-modal{
  display:flex;
  
}


.search-form-modal input{
  font-size:1.2rem;
  border:1px solid black;
  text-indent:5px;
  padding:5px;
}

.search-form-modal button{
  background-color:#091140;
  border-radius:0;
  color:white;
  border:none;
  padding:10px;
  
}

.modal-bar{
  display:flex;
  gap:10px;
  font-style:normal;
}

.modal-bar img{
  width:20px;
  height:20px;
}



.modal-bar p{
  display:flex;
  align-items:center;
  font-size:1rem;
}

.modal .social-links{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
}

.modal .social-links img{
  width:25px;
  height:25px;
  
}




nav {
  display: flex;
  width:100%;
  padding:10px;
  justify-content: space-between;
  align-items: center;
  background-color:white;
}



.nav-logo{
  flex:1;
}

.nav-logo img{
  width:200px;
}

.page-header{
  position:sticky;
  top:0;
  z-index:5;
  width:100%;
}

.menu-primary-container{
  flex:4;
}




.search-form-menu{
  display:none;
}

.menu{
  list-style:none;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}
.menu-item{
  position:relative;
}


.menu-item .menu-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px;
}

#menu-primary > li > p >  a {
    color: black;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size:1.1rem;
    transition:color 0.2s ease;
}


.menu-icon{
  width:18px;
  height:18px;
}



.sub-menu{
  position:absolute;
  display:none;
  left:-2px;
  top:102%;
  margin:0;
  padding:0;
  list-style:none;
  width:max-content;
  background-color:#e7e5e5;
  transition:background-color 0.6s ease-in;
}



.sub-menu  ul{
  position:absolute;
  top:0;
  margin:0;
  padding:0;
  left:100%;
}



@media (min-width:900px){
  .menu-item{
    min-width:100px;
  }
  .sub-menu .menu-item a{
    color:black;
  }
  .menu-item .menu-link img{
    background-color:white;
    border-radius:20px;
    transition:background-color 0.2s ease;
  }

  #menu-primary > li > p >  a:hover {
    color:red;
}

  .menu-primary-container > ul > .menu-item.active:hover{
    border:1px solid black;
  }

  .menu-item:hover > .menu-link > img{
    background-color:#adb70c;
  }

  .sub-menu .menu-item{
    border:0.10px solid #d6d0d0;
    transition:border 0.2s ease;
  }

  .menu-primary-container .sub-menu > .menu-item:hover{
    border-left:5px solid red;
    background-color:white;
  }

  

  .menu-item:hover  > .sub-menu{
    display:block;

    
  }


  .menu-item .menu-icon{
    pointer-events:none;
  }
  
  
}








img.logo{
  width: 200px;
  animation: scale 1s ease-in;
}

img.brand{
  width:300px;
  height:100px;
}





@keyframes scale {
  0%{ 
    opacity: 0;
  }

  50%{ 
    opacity : 0.5;
  }

  100% { 
    opacity : 1;
  }
  
}

.mbl-menu img { 
  width:50px;
  height:50px;
  display: none;
}

main{
  background-color:#F5F5F5;
  height:fit-content;
}

.banner{ 
  padding:0;
  margin:0;
}

.banner img{ 
  width:100%;
  height:100vh;
}

.theme-seperator{
  display: flex;
  align-items: center;
  justify-content:center;
  margin-top:10px;
  margin-bottom:10px;
}

.theme-seperator::before{
  display: inline-block;
  content:"";
  height:1px;
  width:500px;
  justify-content:center;
  background: #cac4c4;
}

.theme-seperator::after{
  display: inline-block;
  content:"";
  height:1px;
  width:500px;
  justify-self:center;
  background: #cac4c4;
}



section{
  padding:5vw 5vw;
  width:100%;
}

main > section:nth-of-type(even){
  
}


.intro-intro{ 
  display: flex;
  justify-content: space-between;
  gap:20px;
  box-sizing:border-box;
}

.intro > h1{
  text-align:center;
}

.left-intro{
  flex:2;
}

.right-intro{
  flex:1;
  overflow:hidden;
  
}


.left-intro p a {
  color:red;
  font-weight: bold;
  text-decoration:underline;
}



.button-center{
  padding:10px;
  width:100%;
  text-align:center;
}

.button-center button{
  padding:1vw;
  background-color:#350035;
  color:white;
  border:none;
  border-radius:5px;
}

.slider{ 
  max-width:100%;
  flex-direction:column;
  overflow:hidden;
}

.slides{ 
  width:100%;
  transition:transform 0.5s ease-in;
}

.slide{ 
  min-width:450px;
  height:200px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  
}

.control{
  width:20px;
  height:20px;
  background-color:black;
}

.control.step{
  background-color:red;
}


.vid{
  width:100%;
  height:300px;
  border:1px solid gray;
  overflow:hidden;
  justify-content:center;
}



.creds{
  flex-direction:column;
  
}
.creds div{
  gap:10px;
}




.right-intro div:not(.creds){
  display: flex;
  align-items: center;
}

.right-intro .controls{
  gap:10px;
  margin-top:10px;
}

.vid{
  margin-bottom:20px;
}

.vid iframe{
  width:100%;
  height:100%;
}


.foot-map{
  padding:0;
  margin:0;
  background-color: #26374A;
  color:white;
}


.foot-map .right{
  display:flex;
  padding:2vw;
  justify-content:space-around;
}

.right-img{
  width:60px;
  height:60px;
  background-color:white;
  padding:10px;
  border-radius:50%;
  margin:auto;
}

.foot-map h3{
  text-align:center;
  height:fit-content;
  margin-bottom:20px;
  margin-top:20px;
}

.foot-map p {
  text-align:center;
}

.right-img img{
  width:100%;
  height:100%;
}

.foot-map h1{
  text-align:center;
  margin:auto;
  padding:10px;
}

.foot-map iframe{
  width:100%;
  height: 300px;
  margin-bottom:-5px;
}








hr.section-break{
  height:5px;
  background-color: red;
}




main > section:nth-of-type(even){
  background-color:white;
 
}



.social-links{
  width:max-content;
  display:flex;
  flex-wrap:wrap;
}




.connect img{
  height:50px;
  width:50px;
}


.no-shrink img{
  width:40px;
  height:40px;
}
.no-shrink{
 
  display:flex;
  gap:10px;
  align-items:center;
}



.rotateup{
  transform: rotate(90deg);
  animation:spin 0.5s ease-in;
}

@keyframes spin {
  from{
    transform: rotate(0deg);
  }

  to{
    transform: rotate(90deg);
  }
  
}

.rotatedown{
  animation:spindown 0.5s ease-in;
}

@keyframes spindown{
  from{
    transform:rotate(90deg);
  }
  to{
    transform:rotate(0deg);
  }
}

  




.options{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

.options span{
  background-color:#b9b0a0;
  cursor:pointer;
  padding:3px;
  border-radius:5px;
  transition:background-color 0.2s ease-in;
}



span.enabled{
  background-color:green;
  color:white;
}


.name{
  width:100%;
  display:inline-flex;
  gap:5px;
}







.emp-intro{
  max-width:80%;
  margin:auto;
  text-align:center;
  margin-bottom:50px;
}
.emp-intro h1{
  font-size:2rem;
}
.emp-about{
  display:flex;
  max-width:1200px;
  margin:auto;
  gap:20px;
}

.emp-about figure{
  flex:1.5;
  overflow:hidden;
  text-align:center;
}

.emp-about figure img{
  width:100%;
  max-height:500px;
  border-radius:20px;
}

.emp-about article{
  flex:2;
  text-align:center;
}

.emp-about article p {
  line-height:1.5;
  margin-bottom:20px;
}

.emp-about blockquote{
  color:#495089;
  border-left:5px solid gray;
  background-color:#f6f0e4;
  padding:5px;
  box-shadow:2px 2px 5px 2px;
}


figcaption{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}

figcaption > span{
  font-size:1.3rem;
  text-transform:uppercase;
  color:#02173b;
}

section.tabs{
  padding-top:1vw;
  padding-bottom:1vw;
}
.tabs h1{
  text-align:center;
  
}

.tab_links{
  display:flex;
  justify-content:center;
  gap:50px;
  padding:10px;
  margin-top:20px;
  
}

.tab_links .tab-btn{
  background-color:#1f0f84;
  color:white;
  font-weight:bold;
  font-size:1.2rem;
  padding:10px;
  border-radius:10px;
  transition:background-color 0.2s ease;
  cursor:pointer;
}

.tab-btn:hover{
  background-color:red;
}


.tab-btn.active{
  background-color:red;
}


.inner p{
  margin-bottom:20px;
}

.inner.active{
  display:block;
}

.inner{
  display:none;
}




section.index-faq{
  padding-top:1vw;
  padding-bottom:1vw;
  
}

.index-faq h1{
  text-align:center;
  margin-bottom:20px;
}




.modal.mobile{
  display:none;
}





section.our-services{
  padding:1vw;
  background-color:#dacccc;
  display:flex;
  justify-content:space-between;

}

.our-services h3{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:2px;
  color:#524848;
}

.programs{
  min-width:30%;
}

.programs > a{
  display:flex;
  align-items:center;
  margin-bottom:5px;
  gap:5px;
  color:#09094f;
  padding:5px;
  
}

.programs a:not(:last-child){
    border-bottom:1px solid #05052a;
}




.programs  img{
  width:20px;
  height:20px;
  
  
}

.service-areas{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.service-areas p{
  display:flex;
  align-content:center;
  padding-right:5px;
  gap:5px;
  align-items:center;
}
.service-areas a{
  color:purple;
}
.service-areas p:not(:last-child){
  border-right:1px solid black;
}
.service-areas img{
  width:20px;
  height:20px;
}

.top-service-areas > div{
  display:flex;
  justify-content:center;
  gap:5px;
  flex-wrap:wrap;
}

.international-service-areas div{
  display:flex;
  justify-content:center;
  gap:5px;
  flex-wrap:wrap;
}

.connect-us{
  padding:1vw;
  background-color:gray;
  color:white;
}

.connect-us h2{
  color:#d4cfcf;
  text-align:center;
}

.connect-us .social-links{
  display:flex;
  gap:20px;
  margin-top:10px;
  margin-bottom:10px;
  justify-content:center;
  width:100%;
  flex-wrap:wrap;
}
.social-links a img{
  width:60px;
  height:60px;
}
.connect-us .imp-links{
  display:flex;
  gap:20px;
  justify-content:center;
  text-transform:uppercase;
  flex-wrap:wrap;
  margin-top:10px;
  margin-bottom:10px;
}

.imp-links a{
  padding-right:10px;
  border-right:1px solid white;
}
.connect-us p{
  text-align:center;
  color:#d4cfcf;
}





@media (max-width:900px) {

  section.bio{
    flex-direction:column;
    overflow:hidden;
    padding:2vw;

  }


  
  .emp-about{
    flex-direction:column;
  }
  .emp-about figure{
    
    min-width:400px;
    margin:auto;
  }
  .emp-about article{
    text-align:left;
  }
  .intro-intro{
    flex-direction:column-reverse;
  }
  .right-intro{
    display:block;
  }
  .right-intro .slider{
    width:100%;
  }
  .right-intro .slide{
    min-width:900px;
    background-position:center;
    height:300px;
  }

  .foot-map .right{
    flex-direction:column;
    gap:10px;
  }
   .modal{
     display:none;
   }

  .search-form-menu{
    display:flex;
    width:100%;
    padding:10px;
  }

  .search-form-menu input[type='search']{
    flex:3;
    padding:10px;
  }

  .search-form-menu button[type='submit']{
    flex:1;
    background-color:gray;
    border:none;
    color:white;
  }

  
  

  .modal.mobile{
    display:block;
    
  }
  .modal-bar{
    display:block;
  }
  .modal-bar p{
    width:100%;
    margin-top:10px;
    margin-bottom:10px;
    
  }

  .modal .social-links{
    display:flex;
    width:100%;
    justify-content:center;
  }

  
  
  .mbl-menu img { 
    display: block;
    cursor: pointer;
  }
  .menu-primary-container{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:0;
    min-height:100vh;
    overflow-y:scroll;
    transition:width 0.2s ease-in;
    background-color:white;
    box-shadow:5px 0px 5px #644964;
    
    
  }

  

  .menu{
    display:block;
    width:100%;
  }

  .menu-primary-container > .menu > .menu-item{
    background-color:#e2dfdf;
    margin-bottom:1px;
  }
  

  .menu-item .menu-link img{
    background-color:white;
    border-radius:50%;
    transition:background-color 0.2s ease-in;
  }

  .menu-item .menu-link img:hover{
    background-color:green;
  }

  .menu-item a:hover{
    text-decoration:underline;
    
  }

  .menu-primary-container > ul >  .menu-item:hover{
  border:none;
  
}

  .menu-item a {
    color:black;
  }

  .menu-item{
    width:100%;
    position:static;
  }


  .sub-menu {
  position: static;
  width: 100%;  
  overflow:hidden;
  height:0;
  transition: height 0.2s ease;
  background-color:white;
  }

  .sub-menu > .menu-item{
    position:static;
    background-color:#e7e7e7;
    margin-bottom:1px;
  }

  .sub-menu > .menu-item .menu-link{
    margin-left:15px;
  }

  
  .sub-menu .menu-item .menu-item{
    background-color:#ffffff;
  
    
  }

  .sub-menu .menu-item .menu-item .menu-link{
    margin-left:30px;
  }


 

  .sub-menu .sub-menu{
    position:static;
    display:none;
  }

  .sub-menu.active{
      display:block;
  }



  .intro{
    
  }

  .foot-map{
    flex-direction:column;
    
  }

  .foot-map  .left, .right{
    width:100%;
  }

  .our-services{
    flex-direction:column;
  }

  .tab_links{
    flex-direction:column;
    text-align:center;
    gap:5px;
  }


 
}


.align-wide{
  width:100vw;
}


.contact-hang{
  background-color:purple;
  color:white;
  width:fit-content;
  padding:20px;
  position:fixed;
  bottom:0%;
  border-top-left-radius:20px;
  border-top-right-radius:20px;
}

.contact-hang p{
  font-size:2rem;
}


.breadcrumbs:first-child::before{
  content:"Home"
  
}

.breadcrumbs span a {
  color:purple;
}