@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');



:root{
    --blue:#6D66FF;
    --s-blue:#6D66FF;

      --input-blue:#0C7A5D;


    --border-color: #c7c8ca;
    --toggle-blue:#6D66FF;
    --blue-active:#6D66FF;
    --black:#444;
    --text-color: #fff;
    --hover-color: #6D66FF;
    --light-color:#777;
    --bg-color:#fff;
    --border:.1rem solid rgba(0,0,0,.2);

    --box-shadow:.4rem .4rem 1rem #ccc,
                -.4rem -.4rem 1rem #fff;


    --box-shadow2:.2rem .2rem 1rem #080808,
                -.2rem -.2rem 1rem #080808;


    --box-shadow-inset:.4rem .4rem 1rem #ccc inset,
                      -.4rem -.4rem 1rem #fff inset;


    --box-shadow-inset2: 0 1rem 2rem rgba(0,0,0,.1);


    --about-bg:#fff;

     --about-bg2:;

    --about-text:#444;

    --about-border:#c7c8ca;

    --about-head: #6D66FF;



    --service-bg: #fafbff;

    --grad: linear-gradient(to bottom right, #156B68, #156B68);

    --grad-input: linear-gradient(to right, #4468FF, #C463FF);

     --grad-input-hover: linear-gradient(to right,  #C463FF, #4468FF);


      --grad-pay: linear-gradient(to right, #4468FF, #C463FF);

      --grad-pay-hover: linear-gradient(to right, #FF6E2F, #FFC700);



     --plan-bg: #000;

     --plan-text: #ccc;


     --price-box: #fff;

     --price-txt: #808080;

     --span-txt: #003579;

     --span-txt2: #808080;

     --review-bg: #fff;

     --review-h1: #808080;

     --slide-bg: #e6e6e6;

     --slide-txt: #666;

     --why-blue: #4368FF;
     --why-txt: #1a1a1a;

     --why-box: #fff;

     --footer-bg: #00152F;

     --nav-bg: #fff;

     --nav-txt: #808080;

     --side-border: #fafafa;

     --login-bg: #003579;

     --flegend: #6DA4F6;




/*
     --admin-body: #0F0B4A;

     --admin-header: #000076;

     --users: #000076;

      --search: #00005F;

      --table: #00CCFF;

      --table-td: #00CCFF;

      --table-td2: #ccc;

      --th-txt: #00008A;

      --th-border: #fafafa;

      --act-head: #fff;

      --search-bg: #00005F;*/


      --admin-body: #000;

         --admin-header: #000;

         --users: #131313;

         --search: #1a1a1a;

         --table: #00CCFF;

         --table-td: #e6e6e6;

         --th-txt: #00008A;

         --th-border: #fafafa;

         --act-head: #00CCFF;

         --search-bg: #1a1a1a;
}





body{
    background: var(--bg-color);

     top: 0px !important;
}



body.active{
    --blue:#222;
    --s-blue:#1a1a1a;
    --border-color: #1a1a1a;
    --toggle-blue:#fff;
    --blue-active:#003579;
    --black:#fff;
    --text-color: #fff;
    --hover-color: #FDBD39;
    --light-color:#ddd;
    --bg-color:#222;
    --border:.1rem solid rgba(0,0,0,.4);

    --box-shadow:.4rem .4rem .4rem #111,
                -.4rem -.4rem .4rem #333;

    --box-shadow-inset:.4rem .4rem 1rem #111 inset,
                      -.4rem -.4rem 1rem #333 inset;


    --box-shadow-inset2:.4rem .4rem 1rem #111 inset,
                      -.4rem -.4rem 1rem #333 inset;



    --about-bg:#1a1a1a;

    --about-bg2:;

    --about-text:#e6e6e6;

    --about-border:#080808;

    --about-head: #fafafa;


    --service-bg: #000;

    --plan-bg: #000;

     --plan-text: #fff;


     --price-box: #1a1a1a;

     --price-txt: #ccc;

      --span-txt: #ccc;

      --span-txt2: #ccc;

       --review-bg: #1a1a1a;

        --slide-bg: #0e0e0e;

        --slide-txt: #ccc;

         --review-h1: #fafafa;

          --why-blue: #fafafa;

          --why-txt: #ccc;

          --why-box: #1a1a1a;

           --footer-bg: #000;

      --nav-bg: #1a1a1a;

     --nav-txt: #ccc;

      --side-border: #4d4d4d;

       --login-bg: #000;


       --input-blue:#1a1a1a;

        --flegend:#ccc;






         --admin-body: #000;

         --admin-header: #000;

         --users: #131313;

         --search: #1a1a1a;

         --table: #00CCFF;

         --table-td: #e6e6e6;

         --th-txt: #00008A;

         --th-border: #fafafa;

         --act-head: #00CCFF;

         --search-bg: #1a1a1a;
}





*{
  font-family: 'Poppins', sans-serif;
  margin:0; 
  padding:0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}





html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}


html::-webkit-scrollbar {
  width: 1rem;
}



html::-webkit-scrollbar-track {
  background: transparent;
}



html::-webkit-scrollbar-thumb {
  background: #fafafa;
}




/*Google Translator Styling*/


.google{
 background-color: #fafafa;
 overflow: hidden;
}


body > .skiptranslate {
    display: none;
}


#google_translate_element a {
  display: none;
}


.goog-logo-link {
    display:none !important;
}

    
.goog-te-gadget {
    color: transparent !important;
}



.goog-te-banner-frame.skiptranslate {
display: none !important;
} 



#google_translate_element{
  background: #fafafa !important;
  text-align: center;
  width: 200px;
  margin: auto;
  overflow: hidden !important;
}


#google_translate_element select{
  padding: 10px !important;
  outline: none;
  width: 10% !important;
  Height: 50px !important;
  color: var(--s-blue) !important;
  background-color: #fafafa !important;
  position: fixed !important;
  bottom: 0rem !important;
  left: 10rem !important;
  border-radius: 20px;
  z-index: 150000000000000000000000000000;
  box-shadow: var(--box-shadow-inset) !important;
  overflow: hidden !important;
}












/*Services Styling*/

.services{
  background-color: var(--service-bg);
   padding: 5rem 9%;
}

.ser_text{
  text-align: center;
  margin: auto;
  padding-bottom: 20px;
  color: var(--about-text);
}

.ser_text p{
  font-size: 20px;
  font-weight: 300;
}

.ser_text h3{
  font-size: 35px;
  font-weight: 500;
}



.services .boxx-container{
   background-color: var(--service-bg);
   display: grid;
   grid-template-columns: repeat(auto-fit, 25rem);
   gap: 1rem;
   justify-content: center;
   align-items: flex-start;
}

.services .boxx-container .box{
   padding: 1rem;
   text-align: center;
}

.box_border{
  border: 0.5px solid var(--hover-color);
  border-radius: 1rem;
}

.services_heading{
  background-color:#fff;
  border: 3px solid #fff;
  width: 10%;
  margin: auto;
  margin-bottom: 30px;
}

.services .boxx-container .box img{
   margin: 1rem 0;
   height: 8rem;
}

.services .boxx-container .box h3{
   font-size: 5rem;
   color: var(--about-head);
   text-transform: capitalize;
}

.services .boxx-container .box p{
   font-size: 2rem;
   font-weight: 600;
   color: var(--about-text);
   padding-bottom: 1.5rem;
}

.heading{
   text-align: center;
   padding-bottom: 2.5rem;
   font-size: 4rem;
   color: var(--black);
   text-transform: capitalize;
}




/*Business Plan Styling */

.bservices{
  background-color: #181A20;
  padding: 5rem 9%;
 /* position: relative;
  background-image: url(assets/img/bg/h3_services_bg.jpg);
  background-size: cover;
  background-position: center;
  overflow:hidden;
  background-attachment: fixed;*/
}

.bservices h1{
  color: #fff;
  font-weight: 700;
}

.bservices .bbox-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
    gap:3rem;
}

.bservices .bbox-container .bbox{
    padding:2rem;
    border: 0.5px solid none;
    border-radius: 10px;
    background: #1E2329;
    position: relative;
    z-index: 0;
    overflow:hidden;
    box-shadow: var(--box-shadow4);
}

.bservices .bbox-container .bbox i{
    font-size:4rem;
    padding-bottom: 5rem;
    color:#FCD535;
}

.bservices .bbox-container .bbox h3{
    font-size:2rem;
    padding-bottom: 1rem;
   color:#FCD535;
}

.bservices .bbox-container .bbox p{
    font-size:1.4rem;
    line-height: 1.8;
    color:#fff;
}

.bservices .bbox-container .bbox::before{
    content: '';
    position: absolute;
    top:0; left: 0;
    height: 100%;
    width: 100%;
    background:  #181A20;
    border: 1rem solid #1E2329;
    z-index: -1;
    clip-path: circle(9rem at 5% 0%);
    transition: .3s linear;
}

.bservices .bbox-container .bbox:hover::before{    
    clip-path: circle(100%);
}

.bservices .bbox-container .bbox:hover > *{
    color:#FCD535;
}



/* Choose a plan styling */

.pricing{
  padding: 0rem 9%;
  position: relative;
  background:#181A20;
  /*background-color: var(--service-bg);*/
  /*background-image: url(images/review-bg1.png);*/
  /*background-size: cover;*/
  /*background-position: center;*/
  /*overflow:hidden;*/
  /*background-attachment: fixed;*/
}


.pricing h1{
  color: #4d4d4d;
  font-weight: 300;
  font-size:25px;
}


.pricing .box-container{
  
  padding-bottom: 5rem;

  
}


.pricing .box-container .box{
  background: #181A20;
  text-align: center;
  padding: 2rem;
  border: 0.5rem solid #1E2329;
  border-radius:1rem;

}


.pricing .box-container .box i{
  font-size: 3rem;
  height: 6rem;
  width: 6rem;
  color: #FCD535;
  line-height: 6rem;
  border-radius: 50%;
  margin-bottom: 0.5rem;
  background-color: #fff;
}

/*.btn{
  display: inline-block;
  margin-top: 0.5rem;
  padding: 1rem 3rem;
  width: 60%;
  background: var(--grad-input-hover);
  color: #fff;
  cursor: pointer;
  font-size: 1.7rem;
  text-transform: capitalize;
  border-radius: 25px;
}


.btn:hover{
  background: #fff;
  color: #4468FF;
}*/


.pricing .box-container .box h3{
  font-size: 25px;
  padding: 10px;
 font-weight: 300;
 color: #fff;
}


.pricing .box-container .box h4{
  font-size: 23px;
  padding: 10px;
 font-weight: 600;
 background: linear-gradient(90deg, #FCD535, #FCD535);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.pricing .box-container .price span{
  font-size: 40px;
 font-weight: 300;
 color: #fff;
}


.pricing .box-container .price .sspan{
  font-size: 15px;
 font-weight: 300;
 color: #fff;

}


.pricing .box-container .box .list{
  margin:1rem;
}

.pricing .box-container .box .list span{
  color: #fff;
}


.pricing .box-container .box .list p{
  font-size: 13px;
  padding: 3px;
 font-weight: 400;
 color: #fff;
}



.pricing .box-container .box hr{
  height: 1px;
  background-color: #fff;
  border:none;
  margin: 1rem auto;
}

.price{
    background:#fff;
    color:#4d4d4d;
}








/*Review Styling*/



.reviews{

  padding: 3rem 9% 5rem 9% ;
  background-color: var(--review-bg);
}

.reviews h1{
  color: var(--review-h1);
  font-weight: 300;
}


.reviews .slide p{
  padding: 2.3rem;
  background-color: var(--slide-bg);
  position: relative;
  margin-bottom: 3rem;
  font-size: 16px;
  color: var(--slide-txt);
  line-height: 1.5;

}

.reviews .slide p::before{
  content: '';
  position: absolute;
  bottom: -1rem;
  left: 2rem;
  height: 2rem;
  width: 2rem;
  background-color: var(--slide-bg);
  transform: rotate(45deg);
}

.user{
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.user img{
  height: 13rem;
  width: 13rem;
  border-radius: 50%;
  border: 5px solid var(--slide-bg);
}


.portfolio{
  font-weight: 300;
  color: var(--review-h1);
}

.user .info h3{
  font-size: 1.7rem;
  color: #181A20;
  text-transform: capitalize;

}


.user .info .stars{
  padding-top: 0.5rem;
}

.user .info .stars i{
  font-size: 1.5rem;
  color:  #FCD535;

}









/*How it works Styling*/


.services2{
  background-color: #181A20;
  padding: 3rem 9% 5rem 9% ;
}


.services2 h1{
  color: var(--review-h1);
  font-weight: 300;
}

.services2 p{
  color: #DA2C32;
  text-align: center;
  margin-bottom: -20px;
  padding-top: 20px;
  font-size: 20px;
  font-weight: 300;
}



.services2 .boxx-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 30rem);
   gap: 2rem;
   justify-content: center;
   align-items: flex-start;
}

.services2 .boxx-container .box{
  background-color: #181A20;
  border: 1rem solid #1E2329;
  box-shadow: var(--box-shadow-inset2);
  padding: 2rem;
  text-align: center;
  border-radius: 10px;
}


.services2_heading{
  background-color:#FCD535 ;
  border: 3px solid #FCD535;
  width: 10%;
  margin: auto;
  margin-bottom: 40px;
}


.services2 .boxx-container .box img{
   margin: 1rem 0;
   height: 8rem;
}

.services2 .boxx-container .box h3{
   font-size: 2rem;
   padding-top: 0.5rem;
   color: #FCD535;
   text-transform: capitalize;
   text-align: left;
}

.services2 .boxx-container .box p{
   line-height: 2;
   font-size: 1.6rem;
   color: #fff;
   padding-bottom: 4rem;
   padding-top: 0.5rem;
   text-align:left;
}

.heading{
   text-align: center;
   padding-bottom: 2.5rem;
   font-size: 4rem;
   color: #fff;
   text-transform: capitalize;
}








/*gallery Styling*/

.gallery{
background-color: var(--service-bg);
padding: 2rem 9%;
}

.gallery h1{
  color: var(--review-h1);
  font-weight: 300;
}


.gallery .box-container{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.gallery .box-container .box{
  margin: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background-color: var(--why-box);
  box-shadow: var(--box-shadow-inset2);
  padding: 0.5rem 0.5rem;
  text-align: center;
  flex: 1 1 25rem;
}

.gallery .box-container .box >img{
  object-fit: cover;
  height: 100%;
  width: 100%;
  padding: 1rem;
}

.gallery .box-container .box >h3{
  font-size: 2.5rem;
  color: var(--why-blue);
  padding: ;
}


.gallery .box-container .box >p{
  font-size: 1.5rem;
  color: var(--why-txt);
  padding: 1rem 0.5rem;
}





#admin{
padding: 5rem 5%;
overflow: hidden;


}

#admin .values{
margin: auto;
width: 100%;
border-radius: 5px;
border: 1rem solid #ebebeb;

}


#admin  h1{
  color: var(--review-h1);
  font-weight: 300;
  text-align: center;
  font-size: 25px;
}




#admin .values table{
display:block;
overflow-x: scroll;
white-space: nowrap;
width: 100%;
}



 #admin .values table td{
    background-color: #ebebeb;
    font-size: 14px;
    font-weight: 300;
    padding: 5px;
    border: 1px solid #fff;
    border-collapse: collapse;
  }


/*Broker cert styling*/

  #broker_cert{
    padding: 4rem 5%;
    background: #181A20;
    margin: auto;
    width: auto;
  }


  .broker_cert{

    height: 70%;
    width: 70%;
    margin: auto;
  }


  .broker_cert img{
    width: 100%;
    height: 100%;
    border-radius: 3rem;
  }
  
  






















 





/* media queries  */


@media (max-width:1300px){
    
    
  

.bservices{
   padding: 5rem 5%;
}

.bservices .bbox-container{
   
    grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
    gap:2rem;
}



.services2{
  padding: 5rem 3%;
}


.services2 .boxx-container{
   grid-template-columns: repeat(auto-fit, 50rem);
}

.services{
  padding: 5rem 5%;
}


.services .box-container{
   grid-template-columns: repeat(auto-fit, 36rem);
}



.bservices{
   padding: 5rem 5%;
}

.bservices .bbox-container{
   
    grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
    gap:2rem;
}


.gallery{
  padding: 0rem 5%;
}

.gallery .box-container .box{
  flex: 1 1 50rem;
}






  }

























@media (max-width:1300px){



.services2{

padding: 5rem 5%;

}


.services2 .boxx-container{
   grid-template-columns: repeat(auto-fit, 36rem);
}


 

}










@media (max-width:991px){


  
}





@media screen and (max-width: 820px){

  
.pricing{
  padding: 0rem 7%;
}


.services2{

padding: 5rem 5%;

}


.services2 .boxx-container{
   grid-template-columns: repeat(auto-fit, 33rem);
}

.services{
  padding: 5rem 5%;
}


.services .box-container{
   grid-template-columns: repeat(auto-fit, 36rem);
}



.bservices{
   padding: 5rem 5%;
}

.bservices .bbox-container{
   
    grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
    gap:2rem;
}


.gallery{
  padding: 0rem 5%;
}

.gallery .box-container .box{
  flex: 1 1 30rem;
}


.reviews{

  padding: 3rem 5% 3rem 5% ;
}







#google_translate_element select{
  padding: 8px !important;
  outline: none;
  width: 30% !important;
  Height: 40px !important;
  color: #333 !important;
  background-color: #fafafa !important;
  position: fixed !important;
  bottom: 0rem !important;
  left: 0rem !important;
  border-radius: 3px;
  z-index: 150000000000000000000000000000;
  box-shadow: var(--box-shadow-inset) !important;
}




/*Broker cert styling*/

  #broker_cert{
    padding: 1rem 0%;
    background: var(--grad);
    margin: auto;
    width: auto;
    overflow:hidden;
  }


  .broker_cert{

    height: 100%;
    width: 100%;
    margin: auto;
  }


  .broker_cert img{
    width: 100%;
    height: 100%;
  }







}








@media screen and (max-width: 640px){
  .open-slide {
  

  }












  @media screen and (max-width: 390px){

  


  }




  @media screen and (min-width: 680px){



  }