/*////////////////////////////////////////////////////////////////////////////////////////////////////

                                                FONT FACE

////////////////////////////////////////////////////////////////////////////////////////////////////*/

@font-face {

    font-family: 'Gordita_Medium';

    src: url("../fonts/Gordita_Medium.otf") format("opentype");

}

@font-face {

    font-family: 'Gordita_Regular';

    src: url("../fonts/Gordita_Regular.otf") format("opentype");

}

@font-face {

    font-family: 'MADE_Coachella';

    src: url("../fonts/MADE_Coachella.otf") format("opentype");

}

h1,h2,h3,h4,h5{

font-family: 'MADE_Coachella' !important;

}

a,p{

font-family: 'Gordita_Regular' !important

}

html,body{

    overflow-x: hidden;

}

/*////////////////////////////////////////////////////////////////////////////////////////////////////

                                           NAVBAR

////////////////////////////////////////////////////////////////////////////////////////////////////*/

.navbar.bg-dark{

    background-color:#1d1b2d!important;

    padding: 0 !important;

}

.navbar .container{

    max-width: 90% !important;

}

.navbar-brand img{

    max-width: 250px !important;

}

.nav-link{

    font-family: 'MADE_Coachella' !important;

    color: white !important;

    font-size: 15px !important;

    letter-spacing: 1px !important;

}

.nav-link:hover{

    color: #f6b9a7 !important;

}

.nav-item{

    padding: 20px 15px !important

}

li.nav-item.img{

    padding-bottom: 0 !important;

}

.nav-item .call-img{

    max-width: 50px !important;

}

.navbar-dark .navbar-toggler{

    padding: 0 !important;

    font-size: 20px !important;

    border: none !important;

    color: white !important;

}

.ftco-navbar-dark.scrolled {

    background-color: #051c2c !important;

    position: fixed !important;

    z-index:11 !important;

    width: 100% !important;

}

.navbar-collapse{

    padding: 10px 0;

    text-align: center;

}

.navbar-collapse.collapse.show .nav-item{

    padding: 10px 0 !important;

}

.navbar-collapse.collapse.show .nav-link{

    font-size: 12px !important;

}

.navbar-collapse.collapse.show .nav-item .call-img{

    max-width: 40px !important;

}

/*////////////////////////////////////////////////////////////////////////////////////////////////////

                                           HERO

////////////////////////////////////////////////////////////////////////////////////////////////////*/

#hero{

    background-color: #2d2855;

    padding: 100px 0;

    position: relative;

}

#thankyou{

    background-color: #2d2855;

}

#thankyou .container.hero{

    height: 80vh;

}

.container.hero{

    padding: 50px 0;

    position: relative;

}

.hero h1{

    color: #f6b9a7;

    font-size: 50px;

    line-height: 1.5;

}

.hero p{

    color: white;

    font-size: 17px;

}

.hero-shape{

    position: absolute;

    text-align: center;

    width: 45%;

    right: 28%;

    max-height: 420px;

}

.hero-line{

    position: absolute;

    width: 95%;

    right: 35px;

    top: 30px;

    max-height: 490px;

}

.hero-line-mobile{

    position: absolute;

    right: 18px;

    top: 4%;

    max-height: 96%;

    width: 90%;

}

.hero-btn {

    font-family: 'Gordita_Medium' !important;

    font-size: 15px;

    border: 1px solid #b9b5b5;

    padding: 15px 29px 20px 29px;

    letter-spacing: 1px;

    color: white !important;

    position: relative;

}

.hero-btn:hover{

    color: #f6b9a7 !important;

    border: 1px solid #f6b9a7;

    text-decoration: none !important;

}

.hero-btn:hover::before{

    background: #f6b9a7;

}

.hero-btn::before {

    position: absolute;

    width: 50px;

    height: 15px;

    content: "";

    background: white;

    left: -12%;

    top: 31%;

    border: 7px solid #001a35;

    outline: 0;

}



.vertical-line-hero{

    border-left: 1px solid #f6b9a7;

    height: 80px;

    position: absolute;

    left: 50%;

    margin-left: -3px;

    bottom: 0;

}

/*////////////////////////////////////////////////////////////////////////////////////////////////////

                                           ABOUT US

////////////////////////////////////////////////////////////////////////////////////////////////////*/

#about, #about2{

    background-color: #2d2855;

    padding: 100px 0;

}

.about h2, .people h2{

    font-size: 40px;

    color: #f6b9a7 !important;

}

.about p{

    font-family: 'Gordita_Regular' !important;

    color: white;

    font-size: 18px;

    line-height: 1.8;

}

.about .h2-2nd{

    padding: 120px 0

}

.about h5{

    color: white;

    font-size: 17px;

    letter-spacing: 1px;

}

.about .row span{

    color: #f6b9a7 !important;

    font-size: 70px !important;

    margin-right: 2px;

}

.about-aboutus-img{

    position: absolute;

    top: 3px;

    right: 3%;

}

.about-profile-img{

    width: 83%;

    position: relative;

    padding-top: 29%;

    display: block;

    margin-left: auto;

}
#about2 .about-profile-img{
    width: 100%;
    object-fit: contain;
    background: white;
    height: 600px;
}
.vertical-line-about{

    border-left: 1px solid #f6b9a7;

    height: 200px;

    position: absolute;

    left: 0%;

    top: 16%;

}

.vertical-line-about-container{

    position: relative;

    width: 80%;

    padding: 50px 0;

}

.vertical-line-about-container h2{

    font-size: 40px !important;

    margin-left: 5%;

}

.hero-profile{

    position: absolute;

    width: 23%;

    right: 0;

}

/*////////////////////////////////////////////////////////////////////////////////////////////////////

                                           ABOUT US

////////////////////////////////////////////////////////////////////////////////////////////////////*/

#people{
    background-color: #2d2855;
    
}

.py-5{
    color: #f6b9a7;
}

.people-card{
    width: 100%; 
    background-color: white;
}

.people-people-1, .people-people-2{
    height: 300px;
    width: 100%;
    object-fit: contain;
}

.people-name{
    color: #f6b9a7; 
    margin-top: 5%;

}

.people-title{
    color: #fafafa;
}

.hero-btn-2{
    background-color:black; 
    color: #fafafa;
}







/*////////////////////////////////////////////////////////////////////////////////////////////////////

                                           PRACTICE AREAS

////////////////////////////////////////////////////////////////////////////////////////////////////*/

#practice-area{

    padding: 50px 0;

    background-color: #2d2855;

}

.container.practice-desktop, .container.legal-pkg{

    max-width: 90% !important;

}

.tab {

    position: relative;

    padding-top: 50px;



  }

  

  /* Style the buttons inside the tab */

  .tab button {

    font-family: 'Gordita_Medium' !important;

    background-color: inherit;

    border: none;

    outline: none;

    cursor: pointer;

    padding: 20px 20px 20px 0;

    transition: 0.3s;

    font-size: 17px;

    color: white !important;

    position: relative;

  }

  .tab button:hover{

      color: #f6b9a7 !important;

  }

  /* Create an active/current tablink class */

  .tab button.active{

    color: #f6b9a7 !important;

  }

  .tab button.active:hover::after{

      background: #f6b9a7;

  }

  button:focus{

    outline: none !important;

  }

  .button-area{

     margin-left: 30%;

  }

  .button-area h2{

      font-size: 40px;

  }

  /* Style the tab content */

  .tabcontent {

    display: none;

    padding: 6px 12px;

  }

  .card{

    margin-top: 20px !important;

    border: none !important;

    height: 459.27px;

  }

  .card img{

    height: inherit;

    object-position: center;

    object-fit: cover;

  }

  .card-content{

      position: absolute;

      display: flex;

      align-items: center;

      height: 459.27px;

      width: 100%;

  }

  .card-title {

      color: white;

      font-size: 40px;

      left: 10%;

      text-align: left;

      margin-left: 10%;

      

  }



  .practice-desktop h2, .practice-mobile{

    color: #f6b9a7;

    font-size: 40px;

  }

  .line-practice-img{

      position: absolute;

      top: 0px;

      right: -26%;

      width: 100%;

      height: 707px;

  }

  .line-practice-img-mobile{

    position: absolute;

    top: -1px;

    right: -11%;

    width: 111%;

    max-height: -webkit-fill-available;

  }

  .swiper-button-prev{

    color: white !important; 

    border: 1px solid white !important;

    border-radius: 50% !important;

    width: 30px !important;

    height: 30px !important;

    font-size: 10px !important;

    left: 77% !important;

    top: 51px !important;

}

.swiper-button-prev:hover, .swiper-button-next:hover{

    color: #f6b9a7 !important; 

    border: 1px solid #f6b9a7 !important;

}

.swiper-button-next{

    right: 0 !important;

    color: white !important; 

    border: 1px solid white !important;

    border-radius: 50% !important;

    width: 30px !important;

    height: 30px !important;

    font-size: 10px !important;

    top: 51px !important;

}

.swiper-button-next:after, .swiper-button-prev:after {

    font-size: 12px !important;

}

  /*////////////////////////////////////////////////////////////////////////////////////////////////////

                                           LEGAL PACKAGES

////////////////////////////////////////////////////////////////////////////////////////////////////*/

#legal-packages{

    padding: 100px 0 150px 0;

    background-color: #2d2855;

    position: relative;

}

.legal-pkg-img{

    position: absolute;

    top: 20%;

    width: 50%;

}

.legal-pkg h2{

    font-size: 40px;

    color: #f6b9a7 !important;

    padding-bottom: 50px

}

.case-box{

    margin: 0 auto;

    width: 95%;

    background-color: white;

    border: 1px solid white;

    border-radius: 10px;

    height: 250px;

    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.288), 0 6px 20px 0 rgba(255, 255, 255, 0.13);

}

.legal-pkg-mobile .case-box{

    height: 35vh;

}

.legal-pkg-mobile{

    position: relative;

}

.legal-pkg-mobile .swiper-button-next, .legal-pkg-mobile .swiper-button-prev{

    top: -20px !important;

}

.legal-pkg-mobile .swiper-button-next:hover, .legal-pkg-mobile .swiper-button-prev:hover{

    outline: none !important;

}

.case-box p{

    display: block;

    margin-right: auto;

    margin-left: auto;

    padding: 30px 50px;

    font-size: 18px;

    font-family: 'Gordita_Medium' !important;

    color: black;

    position: relative;

}

.case-box .list-case-box{

    position: absolute;

    border: 1px solid black;

    background-color: white;

    border-radius: 50%;

    padding: 8px 10px;

    font-family: 'MADE_Coachella' !important;

    font-size: 23px;

    left: 0;

    top: 20px;

}

.view-all-btn{

    color: white !important;

    letter-spacing: 1px;

    position: relative;

}

.view-all-btn:hover{

    text-decoration: none !important;

    color: #f6b9a7 !important;

}

.view-all-btn::after{

    position: absolute;

    width: 100%;

    height: 2px;

    content: "";

    background: white;

    bottom: -20px;

    right: 0;

}

.view-all-btn:hover::after{

    background: #f6b9a7;

}

  /*////////////////////////////////////////////////////////////////////////////////////////////////////

                                           CONTACT US

////////////////////////////////////////////////////////////////////////////////////////////////////*/

#contact{

    padding-top: 100px;

    background-color: #2d2855;

}

.container.contact-us{

    margin-left: 150px !important;

}

.contact-us h2{

    font-size: 40px;

    color: #f6b9a7 !important;

    padding-bottom: 50px;

}

.contact-us .row h5{

    font-size: 23px;

    color: #f6b9a7 !important;

    padding-bottom: 20px;

}

.contact-us .row p{

    font-size: 15px;

    color: white;

    width: 95%;

}

.contact-us .row a{

    font-size: 15px;

    color: white;

    width: 65%;

    z-index: 9 !important;

    position: relative;

}

.contact-us .row a:hover{

    text-decoration: none !important;

    color: rgb(201, 195, 195);

}

#contact-us-bottom{

    padding: 50px 0 80px 0;

    background-color: #2d2855;

    position: relative;

}

#contact-us-bottom h2{

    font-size: 40px;

    color: #f6b9a7 !important;

    width: 50%;

    margin: 0 auto;

    margin-bottom: 30px;

}

.reach-us-btn {

    font-family: 'Gordita_Medium' !important;

    font-size: 15px;

    border: 1px solid #b9b5b5;

    padding: 10px 29px 15px 29px;

    letter-spacing: 1px;

    color: white !important;

    position: relative;

    background-color: transparent !important;

    cursor: pointer;

}

.reach-us-btn.disable {

    border: 1px solid gray;

    color: gray !important;

}

.reach-us-btn:hover{

    text-decoration: none !important;

    color: #f6b9a7 !important;

    border: 1px solid #f6b9a7;

}

.reach-us-btn.disable:hover{

    text-decoration: none !important;

    border: 1px solid gray;

    color: gray !important;

}

.reach-us-btn::before {

    position: absolute;

    width: 50px;

    height: 15px;

    content: "";

    background: white;

    left: -20%;

    top: 31%;

    border: 7px solid #2d2855;

    outline: 0;

}

.reach-us-btn.disable::before{

    position: absolute;

    width: 50px;

    height: 15px;

    content: "";

    background: gray;

    left: -20%;

    top: 31%;

    border: 7px solid #2d2855;

    outline: 0;

}

.reach-us-btn:hover::before{

    background: #f6b9a7;

}

.reach-us-btn.disable:hover::before{

    background: gray;

}

.container .contact-us-bottom{

    position: relative;

}

.contact-us-bottom .col-lg-6.text-center{

    padding-bottom: 50px;

}

.vertical-line-contact {

    border-left: 1px solid #f6b9a7;

    height: 30px;

    position: absolute;

    left: 50%;

    margin-left: -3px;

    bottom: 0;

}

.container.map{

    max-width: 90% !important;

    position: relative;

}

.line-contact-img{

    position: absolute;

    right: 21px;

    top: -80%;

    width: 97%;

}

.line-contact-img-mobile{

    position: absolute;

    top: -130%;

    width: 92%;

}

iframe{

    position: relative !important;

    z-index: 10;

    width: 100%;

    height: 430px;

    border: none;

}

.form-control{

    font-family: 'Gordita_Regular' !important;

    color: #f6b9a7 !important;

    font-size: 15px !important;

    border-top: none !important;

    border-right: none !important;

    border-left: none !important;

    padding: 40px 0 !important;

    background: none !important;

    margin-bottom: 20px !important;

    border-bottom-color: #f6b9a7 !important;

    border-bottom-right-radius: 0px !important;

    border-bottom-left-radius: 0px !important;

}

.form-control.text-area{

    height: 110px !important;

}

::placeholder {

    color: rgba(255, 255, 255, 0.781) !important;

  }

  @-webkit-keyframes loader {

    0%{

       width:0

   }

    20%{

       width:10%

   }

    25%{

       width:24%

   }

    43%{

       width:41%

   }

    56%{

       width:50%

   }

    66%{

       width:52%

   }

    71%{

       width:60%

   }

    75%{

       width:76%

   }

    94%{

       width:86%

   }

    100%{

       width:100%

   }

}

@keyframes loader {

    0%{

       width:0

   }

    20%{

       width:10%

   }

    25%{

       width:24%

   }

    43%{

       width:41%

   }

    56%{

       width:50%

   }

    66%{

       width:52%

   }

    71%{

       width:60%

   }

    75%{

       width:76%

   }

    94%{

       width:86%

   }

    100%{

       width:100%

   }

}

  .progresss-bar{

    width:95%;

    max-width:95%;

    left:50%;

    width:100%;

    max-width:100%;

    border-radius:0

}

 .progress{

    margin-top:85px!important;

    margin-bottom:0!important

}

 .bar{

    margin-top:25px!important;

    margin-bottom:0!important

}

 .progresss-bar{

    border-radius:0;

    overflow:hidden;

    width:100%;

    padding:0 15px;

    display:none;

    background-color: transparent !important;

}

 .progresss-bar span{

    display:block;

}

 .bar{

    background:0 0;

}

 .progress{

    -webkit-animation:loader 8s ease infinite;

    animation:loader 8s ease infinite;

    background:#f6b9a7 !important;

    color:#fff;

    padding:5px;

    width:0 ;

    margin-top:25px;

    margin-bottom:25px;

}

 .progresss-bar{

    position:relative;

    -webkit-transform:translate3d(-50%,-50%,0);

    transform:translate3d(-50%,-50%,0);

}

textarea{

    resize: none !important;

    overflow: hidden !important;

}

/*////////////////////////////////////////////////////////////////////////////////////////////////////

                                           FOOTER

////////////////////////////////////////////////////////////////////////////////////////////////////*/

footer{

    padding: 30px 0;

    background-color:#1d1b2d;

}

footer .container{

    max-width: 90% !important;

}

footer img{

    width: 70%;

}

footer .f-text{

    font-family: 'MADE_Coachella' !important;

    color: white;

    font-size: 15px;

    letter-spacing: 1px;

    float: left;

}

footer a:hover{

    text-decoration: none !important;

    color: #f6b9a7 !important;

}

footer p{

    color: white;

    padding-top: 20px;

    font-size: 15px;

}

footer .col-lg-3{

    padding-top: 20px;

}

.fa-facebook,.fa-linkedin{

    background-color: white;

    border-radius: 30px;

    height: 45px;

    width: 45px;

    padding: 12px 16px;

    font-size: 20px !important;

    color: #2d2855 !important;

}

.fa-facebook:hover, .fa-linkedin:hover{

    background-color: #f6b9a7;

}

.break{

    display: block;

}
.blogHero{
    background-color: #2d2855;
    height: 300px;
    font-size: 40px;
    color: #f6b9a7 !important;
}
.blogs{
    background-color: #2d2855;padding: 80px 0;min-height: 100vh;
}
.blogHero h1{font-size: 80px;}
.blogs .date{font-size: 12px;color:  #2d2855;}
.blogs a{
    font-family: 'Gordita_Medium' !important;
    font-size: 15px;
    border: 1px solid #b9b5b5;
    letter-spacing: 1px;
    color: black;
}
.blogs .card h4{height: 100px;}
.blogs .card img{height: 250px; object-fit: cover;}
.blogs .card{height: 500px;}
.blogs a:hover{opacity: 50%;text-decoration: none;color: black;}
@media(max-width:1440px){
    .blogs .card h4{font-size: 18px;}
}
@media(max-width:960px){
    .blogHero h1{font-size: 60px;}
    .blogHero{height: 200px;}
}
@media(max-width:500px){
    .blogs .card h4{height: fit-content;}
    .blogs .card{height: fit-content;}
}
.navbar-expand-lg .navbar-nav .nav-link{padding: 0 !important;}