@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}
section {
    height: 100% !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
}
.section-pad {
    padding-top: 5% !important;
    padding-bottom: 5% !important;
}
::-moz-selection { /* Code for Firefox */
    color: #fff;
    background: #6372FF;
}
::selection {
    color: #fff;
    background: #6372FF;
}

.navbar-brand {
    display: flex;
}
.logo-sp-wtrmrk {
    max-width: 3em !important;
    margin-right: .5em;
}
.logo-sp {
    font-family: 'Work Sans', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
    display: inline-flex;
}
h1 {font-weight: 600;}
p {font-family: 'Roboto', sans-serif !important;}
/* Navbar-Start */
.navbar {
    padding: 0.5rem 0;
    padding-bottom: .2em;
}
.navbar-toggler{
    border: none !important;
    padding: 1rem !important;
}
.navbar-toggler:focus {
    box-shadow: none !important;
}
.navbar-toggler-icon {
    background-image: url("../assets/navbar-toggler.svg") !important;
    width: 1.4rem !important;
}
#navbarText {
    text-align: right !important;
}
#navbarText .navbar-nav {
    gap: 2em;
}
/* Navbar-End */
.mar-t100 {margin-top: 150px !important;}
@media (max-width:600px) {
    .mar-t100 {margin-top: 120px !important;}
    #navbarText .navbar-nav {gap: 1em;}
}
/* Text-Rotate-Header-Start */
.txt-rotate {
    font-size: 4em;font-weight: 700;color: #6372FF;
}
@media (max-width:600px) {
    .txt-rotate {
        font-size: 3.5em;
    }
}
.word {
    position: absolute;
    max-width: 100%;
    opacity: 0;
}
@media (max-width:500px) {
    .word {
        font-size: .8em !important;
    }
}
@media (max-width:380px) {
    .word {
        font-size: .65em !important;
    }
}
.letter {
    display: inline-block;
    position: relative;
    transform: translateZ(25px);
    transform-origin: 50% 50% 25px;
}
  
.letter.out {
    transform: rotateX(90deg);
    transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
  
.letter.behind {
    transform: rotateX(-90deg);
}
  
.letter.in {
    transform: rotateX(0deg);
    transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Text-Rotate-Header-End */
.btn:focus{
    box-shadow: none;
}

.banner-txt {
    padding: 1.5rem 0;
    margin-bottom: 4.5em;
}
.check-out-btn {
    display: inline-block !important;
    font-size: 1rem !important;
    padding: 0.8rem 1.8rem;
    border: 1px solid #121212;
    border-radius: 0;
}
.lets-talk-btn {
    display: inline-block !important;
    font-size: 1rem !important;
    padding: 0.8rem 1.8rem;
    color: #fff;
    background-color: #000;
    border: none;
    border-radius: 0;
    transition: all .2s ease-in-out;
}
.check-out-btn:hover {
    color: #fff;
    background-color: #000;
}
.lets-talk-btn:hover {
    background: #6372FF;
    color: #fff;
}
.banner-gif-cont {padding: 0 auto;}
.banner-gif {
    max-width: 85% !important;
}

/* Services-Section-Start */
#services {height: 100% !important;}
.primary-other {
    padding-top: 2rem;
}
.primary-other-2 {
    padding-top: 0.5rem !important;
}
.primary-gif {
    max-width: 100%;
}
.other {padding-left: 1rem;}
.other-iconcards {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
}

.icon-card {
    display: flex;
    padding: 1.5rem 0;
}
.icon-circle {
    padding: 1.2rem !important;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 5px 10px 40px rgba(0, 0, 0, 10%);
    margin-right: 2rem;
}
.icon-card h4 {font-size: 1rem;margin: auto 0;}
.icon-card-blue, .icon-card-green {
    transition: all .2s ease-in-out;
}

.icon-card-blue:hover h4 {
    color: #6372FF;
    transition-duration: 0.2s;
}
.icon-card-green:hover h4 {
    color: #59E1AE;
    transition-duration: 0.2s;
}
.icon-card-blue:hover .icon-circle-blue, .icon-card:hover .icon-anim-blue {
    fill: #6372FF;
    transition-duration: 0.2s;
}
.icon-card-green:hover .icon-circle-green, .icon-card:hover .icon-anim-green {
    fill: #59E1AE;
    transition-duration: 0.2s;
}
/* Services-Section-End */

/* What Sets Us Apart-Start */
.what-sec-bg {background-color: #000 !important;color: #fff;}
.what-apart-gif {max-width: 70%;}
.we-crave-div {
    padding: 0 !important;
}
.we-crave-img {
    max-width: 100%;
}
.know-more-btn {
    font-size: 1rem !important;
    color: #fff;
    padding: 0.8rem 1.8rem;
    border: 1px solid #fff;
    border-radius: 0;
}
/* What Sets Us Apart-End */

/* Projects-Start */
.project-cta {justify-content: right !important;}
.project-cta h5 {font-size:0.9rem;margin: auto 0;}
.discover-btn {
    font-size: 1rem !important;
    padding: 0.8rem 3rem;
    color: #fff;
    background-color: #000;
    border: none !important;
    border-radius: 0;
    margin-left: 1rem !important;
}
.portfolio-projects .col-12 {
    padding: 0;
}
.hover-img {
    color: #fff;
    display: inline-block;
    max-width: 100%;
    min-width: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
    margin-bottom: 0;
  }
  
  .hover-img * {
    box-sizing: border-box;
    transition: all 0.45s ease;
  }
  
  .hover-img:before,
  .hover-img:after {
    background-color: #6372FF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
    transition: all 0.3s ease;
    z-index: 1;
    opacity: 0;
    transform: scaleY(2);
  }
  
  .hover-img video {
    vertical-align: top;
    max-width: 100%;
    backface-visibility: hidden;
  }
  .hover-img img {
    vertical-align: top;
    max-width: 100%;
    backface-visibility: hidden;
  }
  
  .hover-img figcaption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 2em;
    align-items: center;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    z-index: 2;
    transition-delay: 0.1s;
  }
  .hover-img figcaption h1, .hover-img figcaption h5 {
      margin: 0;
  }
  
  .hover-img:hover:before,
  .hover-img:hover:after {
    transform: scale(1);
    opacity: .3;
  }
  
  .hover-img:hover > video {
    opacity: 0.5;
  }
  .hover-img:hover > img {
    opacity: 0.5;
  }
  
  .hover-img:hover figcaption {
    opacity: 1;
  }
.other-projects .no-pad {
    padding: 0;
}

.project-card {
    border: 0;
    border-radius: 15px;
    padding-bottom: 1.5rem;
    box-shadow: 0px 23px 26px rgba(135, 135, 135, 10%);
}
.card-title {font-family: 'Poppins', sans-serif !important;}
.swiper-button-prev::after {
    content: url("../assets/swiper-prev.png");
}
.swiper-button-next::after {
    content: url("../assets/swiper-nxt.png");
}
.swiper-button-next, .swiper-button-prev {
    padding-bottom: 2.5rem !important;
}

.swiper-button-prev {
    left: 11%;
}
  
.swiper-button-next {
    right: 11%;
}

.projects-btn-div {
    padding: 1.5em 0;
    text-align: center;
}

/* Projects-End */

/* Client-Start */

.clients-sec {
    background-image: url("../assets/clients-bg.png");
    background-size: 26%;
    background-repeat: no-repeat;
    background-position: -17%;
    height: 100%;
}
.clients-sec .container-md, .clients-sec .row {
    height: 100% !important;
    padding: auto 0;
}
.client-cards .grid {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width:600px) {
    .client-cards .grid {
        justify-content: center;
        grid-template-columns: repeat(1, 1fr);
    }
}
.logo-card {
    display: grid;
    place-items: center;
    height: 10em;
    width: 10em;
    padding: .5em;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.07);
    border-radius: 15px;
}
.logo-card img {
    max-width: 100%;
}

    /* SVGs */
    .svg-circle {
        max-width: 1.4%;
        animation: rotation 3s infinite linear;
        position: relative;
        left: 81%;
        bottom: 0;
    }
    @keyframes rotation {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(359deg);
        }
    }

    .svg-triangle {
        max-width: 1.2%;
        animation: rotation-tri 3s infinite alternate-reverse;
        position: relative;
        left: 90%;
        top: 10%;
    }
    @keyframes rotation-tri {
        from {
          transform: rotate(0deg);
          transform-origin: 50% 50%;
        }
        to {
          transform: rotate(359deg);
          transform-origin: 50% 50%;
        }
    }
    .svg-rect {
        max-width: 2%;
        animation: rotation-rect 3s infinite alternate-reverse;
        position: relative;
        right: 35%;
        top: 0;
    }
    @keyframes rotation-rect {
        from {
            transform: rotate(0deg);
            transform-origin: 50% 50%;
        }
        to {
            transform: rotate(359deg);
            transform-origin: 50% 50%;
        }
    }
    .svg-rect-bann {
        max-width: 5%;
        animation: rotation-rect 3s infinite alternate-reverse;
        position: relative;
        left: 85%;
    }
    .svg-circle-bann {
        max-width: 5%;
        animation: rotation 3s infinite linear;
        position: relative;
        left: 75%;
        top: -180px;
    }
    .svg-triangle-bann {
        max-width: 4%;
        animation: rotation-tri 3s infinite alternate-reverse;
        position: relative;
        right: 50%;
        top: 100px;
    }

/* Client-End */

/* Contact-Start */
.contact-pad {
    padding-top: 5% !important;
    padding-bottom: 2% !important;
}
.contact-form {
    padding: 5rem 0;
}
.form-field {
    text-align: left;
    padding: 0 2rem !important;
}
.form-field label {
    padding-left: .7em;
}
.form-control {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #707070;
    color: #000 !important;
}
.form-control:focus {
    border: none !important;
    border-bottom: 2px solid #6372FF !important;
    box-shadow: none !important;
}
.form-control:visited {
    text-decoration: none !important;
}
.contact-cta {
    padding-top: 4.4rem;
}

.cs-contactform-div #contactform input[type="submit"].check-out-btn {
    background-color: transparent;
    border: #000 1px solid;
    width: max-content;
    justify-self: center;
    align-self: center;
    margin-top: 1.8em;
}
.cs-contactform-div #contactform input[type="submit"].check-out-btn:hover {
    color: #fff;
    background-color: #000;
}

/* Contact-End */

/* Instagram Feed */
.insta-api {
    padding: 2rem 0;
}

/* Footer-Start */
.footer {
    padding-top: 2em;
}
.panda-ft {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    text-align: center;
    margin: auto;
    display: flex;
    justify-content: center;
}
.panda-ft object {
    display:inline-block;
    max-width: 13%;
    padding: 0;
    margin: 0;
    bottom: 0;
}
.face-circle {fill:#FFFFFF;}
.right-ear {fill:#000000;}
.left-ear {fill:#000000;}
.left-eye {fill:#000000;}
.right-eye {fill:#000000;}
.right-pupil {fill:#FFFFFF;}
.left-pupil {fill:#FFFFFF;}
/* Footer-End */


/* Responsive - Mobile - Max-Width Style */
.desk-d {
    display: block;
}
.mob-d {
    display: none !important;
}


@media (max-width:600px) {
    .row {
        --bs-gutter-x: 0;
    }
    .desk-d {
        display: none !important;
    }
    .mob-d {
        display: block !important;
    }
    .logo-sp-wtrmrk {
        max-width: 4em !important;
        padding-left: .5em;
    }
    .section-pad {
        padding-top: 10% !important;
        padding-bottom: 10% !important;
    }
    .section-pad h4 {
        font-size: 1.2em;
    }
    .behold-posts {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 15px !important;
    }
    #banner-content {
        justify-content: center;
    }
    .banner-txt {
        padding-left: 1em;
    }
    #banner-content .check-out-btn {
        margin-bottom: .5em;
    }
    .svg-circle-bann {
        max-width: 10%;
        top: 100px !important;
    }
    .svg-rect-bann {
        max-width: 10%;
        left: 25%;
        bottom: 35px;
    }
    .svg-triangle-bann {
        max-width: 7%;
        left: 10%;
        top: 0;
    }
    .other {
        padding-left: 0;
    }
    .other-iconcards {
        grid-template-columns: auto;
        justify-content: center;
    }
    .check-out-btn, .lets-talk-btn {
        max-width: 100%;
    }
    .clients-sec {
        background: none;
    }
    .client-cards {
        padding-top: 1.5em;
    }
    .client-cards .grid {
        grid-template-columns: auto auto;
        justify-content: center;
    }
    .logo-card {
        max-width: 90%;
        max-height: 90%;
    }
    .svg-circle {
        max-width: 100%;
        left: 75%;
        bottom: 30px;
    }
    .svg-triangle {
        max-width: 90%;
        left: 10%;
        top: 22%;
    }
    .svg-rect {
        max-width: 100%;
        bottom: 0;
    }
    .services-full h1 {
        text-align: center;
    }
    #projects h1, #projects h4 {
        text-align: center;
    }
    #clients h1, #clients h4 {
        text-align: center;
    }
    .contact-form .form-field {
        flex: none;
        margin-bottom: 1em;
        padding: 0 1em !important;
    }
    #insta-sec {
        padding-bottom: 2em !important;
    }
    .footer {
        padding-top: 0;
    }
    .panda-ft object {
        max-width: 35%;
    }
}