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

:root {
    --black: #101010;
    --white: #fff;
    --yellow: #FFEB03;
    --blue: #ff9701;
    --grey: #F6F6F6;
    --orange: #ff9201;
    --perpal: #ff9701;
    --org: #FF7162;
    --cream: #F0EEE7;
    --d-grey: #E7E5E5;
    --red: #EB3A3F;
}

*{
    font-family: 'Poppins', sans-serif;
    border: none;  outline: none;
    list-style: none;
    text-decoration: none;
    text-transform: initial;
    box-sizing:  border-box;
}

*::selection{
  background-color: var(--blue);
  color: var(--white);
}
.text-black{
    color: black;
}
.text-orange{
    color: var(--orange);
}
.text-red{
    color: var(--red);
}
.text-yellow{
    color: var(--yellow);
}
.text-blue{
    color: var(--blue);
}
.cream-bg{
    background-color: var(--cream);
}
*:focus {
    outline: none;
}

body , html{
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body::-webkit-scrollbar , .box-mobile::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track  , .box-mobile::-webkit-scrollbar-track{
    box-shadow: inset 0 0 6px #fff;
}

body::-webkit-scrollbar-thumb , .box-mobile::-webkit-scrollbar-thumb  {
    background-color:  var(--orange);
    outline: 1px solid var(--orange);
}
.relative{
    position: relative;
}
.absolute{
    position: absolute;
}

a , a:hover{
    text-decoration: none;
    color: var(--black);
}
ul{
  padding: 0;
  margin: 0;
}
h1,h2,h3,h4,h5,h6,p,ul,span{
    margin-bottom: 0;
}
h1,h2,h3,h4,h5,h6, h1 span ,h2 span , h3 span , h4 span, h5 span , h6 span{
    text-transform: capitalize;
}
img{
    max-width: 100%;
    height: auto;
}

span,a,li,p {
    font-size: 16px;
    margin-bottom: 0;
}

.container{
    max-width: 1170px
}

section{
    padding: 60px 0;
}
.f-12{ font-size: 12px;  line-height: 18px; }
.f-14{ font-size: 14px;  line-height: 20px; }
.f-17{ font-size: 17px;  line-height: 24px; }
.f-18{ font-size: 18px;  line-height: 25px; }
.f-30{ font-size: 30px;  line-height: 36px; }
.f-35{ font-size: 35px;  line-height: 41px; }
.f-70{ font-size: 70px;  line-height: 76px; }
.f-25{ font-size: 25px;  line-height: 31px; }
.f-22{ font-size: 22px;  line-height: 29px; }
.f-20{ font-size: 20px;  line-height: 27px; }
.f-60{ font-size: 60px;  line-height: 66px; }
.f-65{ font-size: 65px;  line-height: 71px;}
.f-45{ font-size: 45px;  line-height: 52px; }
.f-40{ font-size: 40px;  line-height: 46px; }
.f-55{ font-size: 55px;  line-height: 56px;}
.f-50{ font-size: 50px;  line-height: 56px;}

.fw-100{ font-weight: 100; }
.fw-200{ font-weight: 200; }
.fw-300{ font-weight: 300; }
.fw-400{font-weight: 400; }
.fw-500{font-weight: 500; }
.fw-600{font-weight: 600; }
.fw-700{font-weight: 700; }
.fw-800{font-weight: 800; }
.f-900{font-weight: 900; }

.bg-yellow{
    background-color: var(--yellow);
}
.bg-black{
    background-color: var(--black);
}
.bg-grey{
    background-color: var(--grey);
}
.d-grey{
    background-color: var(--d-grey);
}
.bg-white{
    background-color: var(--white);
}
.bg-blue{
    background-color: var(--blue);
}
.white{
    color: var(--white);
}
.black{
    color: var(--black);
}
.yellow{
    color: var(--yellow);
}  
.blue{
    color: var(--blue);
}
.grey{
    color: var(--grey);
}
.nav__top {
    max-width: 1470px;
    padding: 15px 0;
}
.navbar-light .navbar-nav .nav-link {
    color: black;
    font-weight: 500;
    padding: 0 15px;
    text-transform: capitalize;
}
.btn-wrap .secondary__btn:nth-child(1),
.contact-info  .secondary__btn:nth-child(1){
    border: 2px solid white;
}
.secondary__btn {
    font-size: 16px;
    font-weight: 500;
    color: var(--white);
    padding: 13px 20px;
    border-radius: 5px;
    transition: all .3s linear;
    min-width: 180px;
    text-align: center;
    display: inline-block;
    text-transform: capitalize;
}
.secondary__btn:hover {
    background-color: var(--orange);
    color: var(--white);
    transition: all .3s linear;
}
.primary__btn {
    font-size: 16px;
    font-weight: 500;
    background-color: var(--blue);
    color: var(--white);
    padding: 13px 20px;
    border-radius: 5px;
    transition: all .3s linear;
    min-width: 180px;
    text-align: center;
    display: inline-block;
    text-transform: capitalize;
}
.primary__btn:hover {
    background-color: var(--orange);
    color: var(--white);
    transition: all .3s linear;
}
.banner__wrap{
    background: url(../images/bw-banner.png) center top / cover no-repeat;
    color: var(--white);
    padding: 60px 0;
}
.banner__wrap h1 {
    font-size: 35px;
    font-weight: 700;
}
.banner__wrap h2,
.banner__wrap h2 span{
    font-size: 50px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 50px;
}
.banner__wrap h1 span {
    display: block;
    font-size: 35px;
    font-weight: 700;
    background-color: var(--perpal);
    width: max-content;
    padding: 5px 20px;
    border-radius: 10px;
    text-transform: capitalize;
    margin: 5px 0;
}

.banner__wrap ul li span ,
.info__wrap ul li span{
    display: block;
    line-height: 30px;
}

.banner__wrap ul li span svg {
    color: #ff9701;
    margin-right: 5px;
}
.banner__wrap div .primary__btn:nth-child(1) {
    background-color: var(--perpal);
}
.banner__wrap div .primary__btn:nth-child(2) {
    background-color: var(--white);
    color: var(--black);
}
.banner-img {
    max-width: 100%;
    position: relative;
    left: 15%;
}
.info__wrap ul li span svg {
    color: var(--blue);
}
.uppercase{
    text-transform: uppercase;
}
.portfolio{ 
    background: url(../images/portfolio-bg.webp) center top / cover no-repeat;
}
.portfolio .slick-slide {
    margin: 0 10px;
}
.portfolio .next , .prev{
    cursor: pointer;
    position: absolute;
}
.portfolio .next {
    left: -44%;
    top: 86%;
    width: 4%;
}
.portfolio .prev {
    left: -39%;
    top: 86%;
    width: 4%;
}
.after-pencil {
    position: absolute;
    bottom: -11%;
    max-width: 5%;
}
.children__about .right__arrow {
    position: absolute;
}
.children__about .right__arrow {
    position: absolute;
    right: 10%;
    bottom: 45%;
}
.card__wrap .thumbnail {
    position: relative;
    z-index: -1;
}
.card__wrap .thumbnail::before {
    content: '';
    position: absolute;
    width: 0%;
    height: 3%;
    background-color: var(--org);
    bottom: -3%;
    transition: all .4s linear;
}
.card__wrap:hover .thumbnail::before{
    width: 100%;
    transition: all .4s linear;
}
.bg-portfolio {
    background: url(../images/info-bg.webp) center center / cover no-repeat;
}
.after__portfolio .right-content {
    padding: 80px 0 80px 50px;
}
.moon {
    position: absolute;
    right: 25%;
    top: 10%;
}
.after__portfolio .cream-bg{
    transition: all .2s linear;
}
.after__portfolio .cream-bg:hover {
    background-color: #252323;
    transition: all .2s linear;
    color: var(--white);
}
.after__portfolio .cream-bg:hover h5,
.after__portfolio .cream-bg:hover span{
    color: var(--white)
}
.services__wrap{
    background: url(../images/service-bg.webp) center center / cover no-repeat;
}
.service__card {
    border-radius: 20px !important;
    max-width: 542px;
    background-color: #ededed;
    border-radius: 10px;
}

.service__card .row {
    display: flex;
    align-items: center;
    position: relative;
    height: 300px;
    z-index: 999;
}
.service__card .row span {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    padding: 10px 20px;
    display: block;
    width: max-content;
    position: relative;
    border-radius: 30px;
}
.service__card .row a {
    font-size: 18px;
    font-weight: 600;
    padding-top: 15px;
    display: block;
    color: var(--org);
}
.service__card img {
    position: absolute;
    left: -4px;
    top: 0;
    height: 100%;
}
.service__card .row a:hover{
    color: var(--blue);
}
.service__card .first::before {
    background-color: #FBB419;
}
.service__card .second::before {
    background-color: #B350FF;
}
.service__card .third::before {
    background-color: #43B3D9;
}
.service__card .fourth::before {
    background-color: #FF7162;
}
.service__card .row::before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-radius: 20px;
    right: 12px;
    top: 0;
    transition: all .4s linear;
    z-index: -1;
}
.service__card .row:hover::before{
    width: 90%;
    height: 100%;
    transition: all .4s linear;
}
.service__card .row:hover p,
.service__card .row:hover h6{
    color: var(--white);
    transition: all .5s linear;
}
.service__card .row:hover a{
    color: var(--blue);
    transition: all .5s linear;
}
.bg-y{
    background-color: #FBB419;
}
.bg-p{
    background-color: #B350FF;
}
.bg-b{
    background-color: #43B3D9;
}
.bg-o{
    background-color: #ff9701;
}
.service__card .row:hover span{
    background-color: var(--white);
    color: var(--black);
    transition: all .5s linear;
}
.baloon {
    position: absolute;
    top: -13%;
    left: 5%;
    animation: rotate 3s infinite alternate;
}
@keyframes rotate {
    0%{transform: rotate(10deg);}
    0%{ transform: rotate(-35deg);}
    
}
.testimonial{
    background: url(../images/test-bg.webp) center center / contain no-repeat;
    background-size: 40%;
}
.test__card {
    padding: 45px 20px 30px 20px;
    position: relative;
    border-radius: 10px;
    max-width: 370px;
    margin: 50px 10px 0 10px;
}
.test__card img {
    position: absolute;
    top: -22%;
    left: 8%;
    padding: 10px;
    clip-path: circle();
    max-width: 27%;
}
.test__card p {
    font-size: 14px;
    line-height: 17px;
    font-weight: 300;
    min-height: 110px;
}
.test__card h6 span {
    width: 50px;
    display: block;
    border: 1px solid white;
}

.slick-dots li {
    width: 30px;
    height: 6px;
    background-color:  #c3c0c0;
  }
  .slick-dots li:active {
    background-color: var(--blue);;
  }
  .slick-dots li button:before,
  .slick-dots li.slick-active button:before {
    color: transparent;
}
.testi-slider .slick-dots li {
    width: 30px;
    height: 6px;
    background-color: #c3c0c0;
    border-radius: 10px;
    margin: 3px;
}
.slick-dots li.slick-active button:before {
    background-color: #113357;
    width: 30px;
    height: 6px;
    opacity: 1;
    border-radius: 5px;
}
.testimonial div ul:nth-child(1) {
    border-bottom: 1px solid white;
    width: max-content;
}
.slick-dots {
    bottom: -40px;
}
.about__info .right-content li {
    display: flex;
    align-items: center;
    gap: 15px;
}
.cta__wrap{
    background: url(../images/cta-bg.webp) center center / cover no-repeat;
    margin-top: 2rem;
}
.cta__wrap .primary__btn:hover{
    background-color: var(--white);
    color: var(--black);
}
.triangle {
    position: absolute;
    top: -15%;
    left: 4%;
    max-width: 9%;
}
.query__form{
    background: url(../images/form-bg.webp) center center / cover no-repeat;
}
.query__form form input::placeholder ,
.query__form form textarea::placeholder {
    text-transform: capitalize;
}
.query__form form input ,
.query__form form textarea {
    width: 100%;
    height: 60px;
    border: 1px solid var(--orange);
    padding: 20px;
    text-transform: lowercase;
    border-radius: 30px;
    margin-bottom: 15px;
}
.query__form form textarea{
    height: 140px;
}
.query__form form button {
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    background-color: transparent;
    border: 1px solid var(--orange);
    padding: 15px 35px;
    border-radius: 30px;
    transition: all .3s linear;
}

.query__form form button:hover {
    background-color: var(--orange);
    color: var(--white);
    transition: all .3s linear;
}
.query__form .right-content ul li {
    padding-bottom: 15px;
}

/* .query__form .right-content ul li:nth-child(2) svg {
    background-color: var(--orange);
    color: var(--white);
    padding: 10px;
    clip-path: circle();
    width: 4%;
    font-size: 25px;
    margin: 0 2px;
}
.query__form .right-content ul li:nth-child(2) svg:hover {
    background-color: var(--black);
} */
.f-call a,
.f-mail a {
    display: block;
    font-size: 18px;
    line-height: 30px;
}
.query__form .right-content ul li p:nth-child(1) {
    padding-bottom: 5px;
}
.footer .txt {
    padding-top: 15px;
    font-size: 14px;
    padding-bottom: 25px;
    padding-right: 30px;
}
.ft-social li svg {
    font-size: 20px;
    color: #f5f5f5;
    background-color: #fff0e05e;
    padding: 10px;
    clip-path: circle(49%);
    min-width: 21px;
}

.ft-social li svg:hover {
    background-color: var(--yellow);
    color: var(--black);
}
.footer h3 {
    font-size: 20px;
    padding-bottom: 10px;
    display: block;
    color: white;
    font-weight: 400;
}
.footer .row .col-12:nth-child(2) ul li a,
.footer .row .col-12:nth-child(3) ul li a,
.footer .row .col-12:nth-child(4) ul li a ,
.footer .address  span{
    display: block;
    line-height: 35px;
    font-size: 14px;
    text-transform: capitalize;
}
.footer .row .col-12:nth-child(2) ul li a:hover,
.footer .row .col-12:nth-child(3) ul li a:hover,
.footer .row .col-12:nth-child(4) ul li a:hover,
.address li a:hover  {
    color: #FFD523;
}
.footer .row .col-12:nth-child(2) ul li a svg,
.footer .row .col-12:nth-child(3) ul li a svg,
.footer .row .col-12:nth-child(4) ul li a svg {
    color: #FFD523;
    padding-right: 5px;
}
.address li {
    display: flex;
    align-items: center;
    padding-bottom: 15px;
}

.address li svg {
    font-size: 22px;
    padding-right: 15px;
    color: white;
}
.footer, .footer ul li a {
    color: white;
}
.kite {
    position: absolute;
    right: 10%;
}
/* sticky form */
.header-form-st.active {
    display: block;
}
.header-form-st {
    position: absolute;
    right: 60px;
    background: black;
    padding: 20px 20px;
    box-shadow: 2px 2px 11px 0px #00000029;
    border-radius: 12px;
    height: 375px;
    transition: all .5s ease-in-out;
    display: none;
    margin-top: 12px;
    right: 20%;
    top: 0;
    z-index: 999;
}
.header-form-st form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    right: 0;
    top: 0;
}

.header-form-st h3 {
    padding-bottom: 20px;
    color: #fff;
    font-size: 25px;
}

.header-form-st form input {
    margin: 0px 0 10px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 0;
    box-shadow: 2px 2px 11px 0px #00000029;
}

.header-form-st form textarea {
    margin-bottom: 10px;
    padding: 8px 10px;
    resize: none;
    height: 70px;
    border-radius: 14px;
    box-shadow: 2px 2px 11px 0px #00000029;
    border: 0;
}

.header-form-st form button {
    background-color: #ff9701;
    padding: 11px 20px;
    border-radius: 14px;
    color: #434343;
    font-weight: bold;
    font-size: 12px;
    box-shadow: 1px 6px 3px rgb(0 0 0 / 21%);
    text-decoration: none;
    transition: all .5s ease-in-out;
    min-width: 120px;
    border: 0;
    text-align: center;
    margin-top: 15px;
}

.header-form-st .fa-caret-up {
    position: absolute;
    top: -27px;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: black;
}

.header_main_sec.fixed .header-form-st {
    z-index: 5;
    top: 80px;
}
.close-btn-hdr.ta-center {
    position: absolute;
    top: -20px;
    right: -20px;
    background: #ff9701;
    padding: 20px;
    border-radius: 60%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 26px;
    text-decoration: none;
}
.nav__grid {
    display: grid;
    grid-template-columns: auto auto auto;
    background-color: #fffef1;
}
.nav__grid img {
    width: 45px;
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7%) hue-rotate(174deg) brightness(86%) contrast(100%);
}
.nav__grid li a {
    padding: 8px 55px 8px 15px;
    font-size: 14px;
    text-transform: capitalize;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #0000000a;
}
.nav__grid li a:hover {
    background-color: #34bd9f;
    color: var(--white);
}
.nav__grid li:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(192deg) brightness(107%) contrast(101%);
}
.nav__grid li:hover a {
    color: var(--white);
}
.services__grid a object {
    filter: brightness(0) saturate(100%) invert(17%) sepia(78%) saturate(4919%) hue-rotate(272deg) brightness(94%) contrast(98%);
}
.plat-slider {
    background: url(../../assets/images/plat.webp) center center / contain repeat;
    background-position: 50%;
    height: 66px;
    animation: platform-img-re 200s linear infinite;
    -webkit-animation: platform-img-re 200s linear infinite;
    top: 16px;
    background-size: 900px;
}
@-webkit-keyframes platform-img-re {
0% {
    background-position: 0 0
}

to {
    background-position: 4750px 0
}
}
.process__wrap .content {
    border: 1px solid #B3B3B3;
    padding: 15px;
    border-radius: 5px;
    height: 100%;
}

.process__wrap .content object {
    filter: brightness(0) saturate(100%) invert(68%) sepia(36%) saturate(4529%) hue-rotate(318deg) brightness(98%) contrast(107%);
}
.process__wrap .content:hover {
    color: var(--white);
    background-color: #ff8479;
}
.process__wrap .content:hover span,
.process__wrap .content:hover object{
    filter: brightness(0) saturate(100%) invert(93%) sepia(100%) saturate(26%) hue-rotate(5deg) brightness(106%) contrast(105%);
}
.test-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.test-content li p , .test-content li p span {
    text-transform: capitalize;
    line-height: 10px;
    padding: 6px 0 12px;
    font-size: 17px;
}
.test-content li svg {
    font-size: 12px;
    color: #FCCE06;
}
.testimonial__wrap{
    background: url(../../assets/images/test-bg.webp) center center / contain no-repeat;
    background-size: 40%;
}
.before-abc {
    position: absolute;
    right: 3%;
    top: -35%;
}
.after-girl {
    max-width: 15%;
    position: absolute;
    bottom: -5%;
    right: 10%;
}

.round {
    color: var(--blue);
    padding: 13px 20px;
    border-radius: 30px;
    border: 2px solid var(--blue);
    position: relative;
    z-index: 0;
}
.after-round {
    position: absolute;
    content: '';
    width: 20%;
    height: 100%;
    background-color: var(--orange);
    left: -6px;
    top: 0;
    clip-path: circle();
    z-index: -1;
    animation: title-animate 5s infinite alternate;
}
@keyframes title-animate{
    0%{width: 185%};
    100%{width: 185%};
}
.navbar-nav .dropdown-menu {
    padding: 0;
    top: 40px
}
.line {
    position: absolute;
    bottom: 12%;
    left: 9%;
}
.org-line {
    filter: brightness(0) saturate(100%) invert(53%) sepia(16%) saturate(6945%) hue-rotate(6deg) brightness(114%) contrast(104%);
    position: absolute;
    right: 17%;
    transform: rotate(185deg);
}
.clock {
    position: absolute;
    right: 5%;
    bottom: -19%;
}
.icon-list li p {
    font-size: 20px;
    text-transform: capitalize;
    line-height: 40px;
}
.banner__form {
    max-width: 450px;
    padding: 50px 40px;
    background-color: var(--white);
    border-radius: 10px;
    display: block;
    margin: auto;
}
.banner__form input {
    display: block;
    width: 100%;
    height: 45px;
    margin-bottom: 15px;
    border-radius: 5px;
    background-color: #FFFFFF;
    color: var(--black);
    padding: 15px;
    border: 1px solid #80808070;
}
.banner__form input::placeholder,
.banner__form textarea {
    font-size: 14px;
    text-transform: capitalize;
    color:var(--black);
    
}
.banner__form textarea {
    display: block;
    width: 100%;
    height: 140px;
    border-radius: 5px;
    padding: 15px;
    border: 1px solid #80808070;
}
.banner__form button {
    font-size: 20px;
    font-weight: 500;
    color: white;
    background-color: var(--red);
    width: 100%;
    height: 45px;
    border-radius: 5px;
    margin-top: 20px;
}
.bg-cream{  
    background-color: #F3F1D0;
}
.portfolio_box_img{
    margin-bottom: 20px;
}
.portfolio__wrap .nav-pills .nav-link {
    font-size: 18px;
    font-weight: 600;
    color: black;
    padding: 5px 20px;
}
.portfolio__wrap .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #ff9701;
    color: white;
}
.portfolio_box_img a {
    position: relative;
}
.portfolio_box_img a::before {
    position: absolute;
    content: '';
    background: url(../images/search.png) center center / cover no-repeat;
    width: 100%;
    height: 100%;
    clip-path: polygon(48% 55%, 49% 54%, 49% 56%, 48% 54%);
    transition: all .3s linear;
}
.portfolio_box_img a:hover::before{
    clip-path: polygon(48% 55%, 49% 54%, 49% 56%, 48% 54%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.books-platforms .col-12:nth-child(1) {
    border-right: 1px solid grey;
}
.dark-blue{
    background-color: #ff9701;
}
.info-list {
    display: grid;
    grid-template-columns: auto auto;
    max-width: 600px;
    row-gap: 35px;
}
.info-list li {
    color: white;
}
.banner__portfolio{
    background: url(../images/portfolio.png) center center / cover no-repeat;  
    padding: 100px 0; 
}
.bg-red{
    background-color: #EB3A3F;
}
.query-form input , .query-form textarea {
    font-size: 16px;
    color: black;
    border: 1px solid #BEBEBE;
    height: 59px;
    padding: 10px;
    display: block;
    min-width: 570px;
    margin-bottom: 15px;
    border-radius: 5px;
}
.query-form textarea {
    height: 140px;
}
.query-form button {
    font-size: 20px;
    font-weight: 500;
    background-color: #302B2B;
    color: white;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
}
.contact-info,
.about-info{
    background: url(../images/contact-info-bg.png) center center / cover no-repeat;
}
.contact-details .btn-wrap .primary__btn:nth-child(1){
    background-color: transparent;
    border: 2px solid var(--blue);
    color: var(--blue);
    padding: 11px 20px;
}
.address-list li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background-color: #F1F1F1;
    height: 170px;
    width: 210px;
    border-radius: 5px;
}
.address-list li p {
    font-size: 13px;
}
.address-list li a:hover {
    background-color: #ffd1cd;
}
.txt {
    padding-right: 130px;
}
.about-info .secondary__btn {
    background-color: white;
    color: var(--black);
    border: 0 !important;
    font-weight: 600;
}
.about-info .btn-wrap .secondary__btn:nth-child(2) {
    background-color: var(--yellow);
}
.about-book {
    position: absolute;
    max-width: 39%;
    top: -90px;
}
.about-cta{
    background: url(../images/about-cta-bg.png) center center / cover no-repeat;
}
.cta-after-img {
    position: absolute;
    bottom: -15px;
    left: 5%;
}
.proces-list {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 40px;
    row-gap: 50px;
    position: relative;
}
.proces-list::before {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    border-left: 1px solid #80808047;
    left: 52%;
}
.proces-list::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    border-top: 1px solid #80808047;
    top: 50%;
}
.about-banner{
    background: url(../images/about-banner.png) center center / cover no-repeat;   
}
.testimonial  .slick-slide{
    height: auto;
}
.author__info .img-frame {
    left: 0;
    filter: brightness(0) saturate(100%) invert(39%) sepia(29%) saturate(5630%) hue-rotate(332deg) brightness(88%) contrast(111%);
}
.img-frame {
    position: absolute;
    left: 46px;
    top: -15px;
    -webkit-animation: matrix-animation 1s infinite alternate;
    animation: matrix-animation 1s infinite alternate;
}
@-webkit-keyframes matrix-animation {
    0% {
        transform: matrix(0.8, 0, 0, 0.8, 0, 0);
    }
    100% {
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
  }
  @keyframes matrix-animation {
    0% {
        transform: matrix(0.8, 0, 0, 0.8, 0, 0);
    }
    100% {
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
}
.author__info .test-next {
    cursor: pointer;
    background-color: var(--red);
    padding: 20px 10px;
    position: absolute;
    right: -5%;
    bottom: 7%;
}
.author__info .test-next:hover {
    background-color: var(--black);
}
.author__info .relative img:nth-child(2){
    position: relative;
    z-index: 999;
}
.web-address{
    max-width: max-content;
}
.author-profile img {
    border: 1px solid grey;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    width: 100%;
    border-bottom: 0;
}
.author-profile .content {
    width: 100%;
    margin: auto;
    background-color: var(--blue);
    padding: 20px 20px;
    z-index: 9999;
    text-align: center;
    position: absolute;
    bottom: 0; left: 0;
}

.author-profile .content span {
    font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
    color: white;
    display: block;
}

.author-profile .content a {
    font-size: 14px;
    font-weight: 500;
    color: #FFD523;
}

.author-profile {
    max-width: 345px;
    height: auto;
    position: relative;
    margin: 35px auto 0 auto;
}

.author-profile .content::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
    transition: all .3s linear;
    z-index: -1;
    background: linear-gradient(90deg, rgba(193,146,1,1) 0%, rgba(216,174,1,1) 55%);
}

.author-profile .content:hover::before {
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
}
.author-profile .content:hover::before a{
    color: black;
    transition: all .4s linear;
}
.brand-logo {
    width: 240px;
}
.ft-logo{
    width: 240px;
    filter: brightness(0) invert(1);
}
.author__info .slick-slide{
    margin: 0 5px;
}

.list-simple li {
    list-style: disc;
}

.sec-padding h3 {
    padding: 20px 0 5px 0;
}
.list-simple li {
   padding: 10px 0;
}

.lowercase{
    text-transform: lowercase !important;
}

/* snow banner css */
.snow-bg {
    position: relative;
    overflow-x: hidden;
}
/* .home-banner p{
    color: var(--white);
} */
.home-banner .col-lg-5  {
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-banner form::before {
    content: '';
    position: absolute;
    background: url(../../assest/images/pen.webp) center center/contain no-repeat;
    width: 100%;
    height: 100%;
    left: 40%;
    top: 1%;
    transform: rotate(45deg);
}

.snow-bg:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image: 
    url('../images/snow-1.png'),
    url('../images/snow-2.png'),
    url('../images/snow-3.png');
    animation: snow 10s linear infinite;
 }
 
 @keyframes snow {
      0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
      50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
      100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
 }
 
 
 
/*banner*/

@font-face {
    font-family: 'Conv_GraphikBold';
    src: url('../font/GraphikBold.woff');
    
}

@font-face {
    font-family: 'Conv_GraphikRegular';
    src: url('../font/GraphikRegular.woff');
    
}

@font-face {
    font-family: 'Conv_GraphikSemibold';
    src: url('../font/GraphikSemibold.woff');
  
}

.child_banner {
    background-image: url(../images/page/child-banner-bg.png);
    background-size: cover;
    background-position: right bottom;
    width: 100%;
    min-height: 640px;
    align-items: center;
    padding: 170px 0 0;
    padding-top: 80px;
}

.banner_text_mm {
    margin: 0px 0 0;
        position: relative;
    z-index: 0;
}

.title_m {
    font-family: 'Conv_GraphikBold' !important;
}

 .title_m{
    font-size: 50px !important;
    margin: 0;
}

 .title_m span{
    font-family: 'Conv_GraphikBold' !important;
    margin: 0 0 0 150px;
     font-size: 50px !important;
}

 .title_m b{
    margin: 0 0 0 60px;
}


.banner_text_mm p {
    margin: 30px 0 5px 0;
    line-height: 26px;
    color: white;
}

.btn_banner {
    margin: 60px 0 0;
}

.vec_img1 {
    position: absolute;
    left: -140px;
    top: -70px;
}

.vec_img2 {
    position: absolute;
    position: absolute;
    left: -150px;
    bottom: -50px;
}

.banner_text_mm h1 {
    position: relative;
    z-index: 1;
    color: white;
}

.banner_text_mm h1:before {content: "";width: 280px;background-color: #fff;height: 9px;position: absolute;top: 42px;z-index: -1;left: -15px;}

.banner_form_m{
    background-image: url(../images/page/child-banner-form.png);
    background-size: 100%;
    background-position: center top;
    /* width: 100%; */
    padding: 0px 130px 0;
    margin: -80px -90px -240px 0px;
    float: right;
    height: 650px;
    background-repeat: no-repeat;
    position: relative;
}

.banner_form_m:before{
    content:"";
    background-image: url(../images/page/child-banner-vec-img3.png);
    background-repeat: no-repeat;
    position:absolute;
    width: 147px;
    height: 339px;
    left: -65px;
    bottom: 100px;
}

.banner_form_m:after{
    content:"";
    background-image: url(../images/page/child-banner-vec-img4.png);
    background-repeat: no-repeat;
    position:absolute;
    width: 199px;
    height: 276px;
    right: -120px;
    bottom: 170px;
}

.banner_form_m h3 {
    color: #000;
    font-size: 24px;
    font-family: 'Conv_GraphikBold' !important;
    margin: 0 0 20px;
}

.banner_form_m form {
    padding: 130px 0 0;
}

.banner_form_m h3 span {
    /* font-size: 24px; */
    font-family: 'Conv_GraphikBold' !important;
    margin: 0;
    color: #f7931e;
}

.banner_form_m input.form-control, .banner_form_m textarea.form-control {
    height: 45px;
    background-color: #f1f1f1;
    color: #494949;
    border: none;
    box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%);
}

.banner_form_m textarea.form-control {
    height: 115px;
}

.banner_form_btn {
    float: none;
    padding: 14px 50px 13px;
    border-radius: 50px;
    background: linear-gradient(to right, #ff0022, #64000d);
    border: none;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    margin: auto;
    display: table;
    font-family: 'Conv_GraphikBold' !important;
}

.banner_form_m .form-group {
    margin-bottom: 15px;
}
.blk-btn {
    background: black;
}
.wth-btn {
    background: white;
    color: black;
}
/*banner*/

.thumbnail img {
    height: 372px;
    object-fit: cover;
}