@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,900&display=swap');
body{
    background: #000000e8;
    backdrop-filter: blur(200px);
    font-family: 'Poppins', sans-serif !important;
}
@media (min-width:1400px){
    section#banner .h1{
        font-size:85px !important;
    }
}
.form .mb-3.col-lg-4 {
    display: flex;
    align-items: center;
}
.form label {
    color: #fff;
    padding-left: 10px;
}
.accordion-item {
    margin-bottom: 10px;
}
section#projects li {
    padding: 5px;
}
.modal-body img {
    width: 100%;
}a.btn.btn-vew {
    background: #f26941;
    color: #fff;
}
button.btn-close {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0;
}
button:focus:not(:focus-visible) {
    box-shadow: 0px 0px 0px #ddd !important;
}
button.accordion-button::after {
    background-image: url(../aro.png) !important;
}
button.accordion-button {
    background: #000;
    color:#fff;
    margin-bottom:5px;
}
.accordion-item {
    background: #000 !important;
    border: none !important;
}
.accordion-button:not(.collapsed) {
    background: #e76640;
    color: #000;
}
.accordion-body {
    color: #fff;
}
section.bg-faq .h2{
    font-size:65px;
    color:#fff;
}
@media (min-width:992px){
.home .ser-range-box {
    min-height: 350px !important;
}
.ux-pg .ser-range-box{
    min-height: 370px;
}
.dm .ser-range-box{
    min-height: 295px;
 }
}
@media(min-width:992px){
    .modal-dialog.modal-dialog-scrollable {
    height: 590px;
}
.lgp .ser-range-box {
    min-height: 270px !important;
}
.abtp .ser-range-box{
    min-height: 300px !important;
}
}
section.about-us h2 {
    color: #fff;
    font-size: 65px;
}
section.about-us p {
    font-size: 20px;
    color: #c5c5c5;
    text-align:justify;
}
.modal {
    --bs-modal-width: 90%  !important;
}
.modal-header {
    border: none;
}
h1{
    font-family: 'Poppins', sans-serif !important;
        font-weight: 600 !important;
}
h2{
    font-family: 'Poppins', sans-serif !important;
        font-weight: 600 !important;
}
h3{
    font-family: 'Poppins', sans-serif  !important;
    
}
h4{
    font-family: 'Poppins', sans-serif !important;
}
h5{
    font-family: 'Poppins', sans-serif !important;
}
p{
    font-family: 'Poppins', sans-serif !important;
}
span{
    font-family: 'Poppins', sans-serif !important;
}
a{
    font-family: 'Poppins', sans-serif !important;
}
button{
    font-family: 'Poppins', sans-serif !important;
}

.footer-box a:hover{
    color: #F26A42;
}
.dropdown-item.active, .dropdown-item:active{
    background-color: #F26A42 !important;
    color: #fff !important;
}
.header-bg nav li a{
    padding: 10px 20px;
}
.header-bg nav .dropdown-menu li a:hover{
    background-color: #F26A42;
    color: #fff !important; 
}
/*********Padding**********/
.pt-100{
padding-top: 100px;
}
.ptb-100{
padding: 100px 0px;
}
.pb-100{
padding-bottom: 100px;
}
.ptb-50{
padding: 50px 0px;
}
.ptb-40{
padding: 40px 0px;
}
.ptb-30{
padding: 30px 0px;
}
.pt-50{
padding-top: 50px;
}
.pt-80{
padding-top: 80px;
}
.pb-50{
padding-bottom: 50px;
}
.pb-80{
padding-bottom: 80px;
}
.pt-40{
padding-top: 40px;
}
.pb-40{
padding-bottom: 40px;
}
.pt-30{
padding-top: 30px;
}
.pb-30{
padding-bottom: 30px;
}
.pt-20{
padding-top: 20px;
}
.pb-20{
padding-bottom: 20px;
}
/*********End Padding********/
a.navbar-brand img {
    width: 180px;
}
.btn-header svg {
    width: 180px;
}
.ser-range-box p {
    text-align: justify;
}
.dr-one a{
    color: black !important;
}
.header-bg nav li a {
    color: #fff;
    font-weight: 500;
}
.ft-social li {
    margin-right: 15px;
}
.ft-social li a:hover svg path{
    fill: #F26A42 !important;
}
select.form-control {
    color: #c5c5c5 !important;
}
input {
    color: #c5c5c5 !important;
}
.footer-box hr {
    border: 0;
    border-top: 1.2px solid;
    opacity: 1;
    border-color: rgb(217 217 217 / 80%);
}
.footer-box a{
    color: #fff;
    text-decoration: none;
}
.logo-ft {
    width: 290px;
    margin-bottom: 15px;
}
.ft-p1{
    font-weight: 600;
    font-size: 20px;
}
.footer-box p{
    color: #fff;
}
.footer-box .list-menu li {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
}
.btn-explore {
    color: #fff;
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 1px solid #f26a42;
    transform: rotate(270deg);
    position: absolute;
}
button.btn-write svg {
    width: 170px;
    margin-top: 30px;
}

button.btn-write {
    background: transparent;
    border: none;
}
.sr-hed li a.active{
    color: #000 !important;
}
.items-sr h4 {
    color: #f26a42;
    font-size: 25px;
    font-weight: 600;
    margin-bottom:2px;
}
.items-sr img {
    max-width: 80px;
}
.items-sr p{
    margin-top:0px;
}
.uniq-bg p {
    line-height: 28px;
}
.btn-call-ft svg {
    width: 170px;
}
.btn-call-ft {
    margin-top: 15px;
}
.ft-call-bg p {
    text-align: center;
}
.nav-button-res .navbar-toggler {
    float: right;
}
.ser-range-box h3 {
    font-weight: 600;
}
@media screen and (max-width:992px){
    ul.navbar-nav {
        background: #060606;
        position: absolute;
        top: 50px;
        right: 0;
        padding: 8px 25px;
    }
    .h1 {
    font-size: 65px  !important;
    color: #fff;
    }
    section#banner .subH p{
        font-size: 32px !important;
        margin-top:10px !important;
    }
    .h2 {
    font-size: 35px !important;
}
section#write .h3 {
    font-size: 35px !important;
}
    .nav-button-res .navbar-toggler svg {
        fill: #fff !important;
        width: 25px;
        height: 25px;
    }
    section#banner .h1 {
        font-size: 65px !important;

    }
    .pt-res-100 {
        padding-top: 60px !important;
    }
    .row.subH {
        padding-top: 50px !important;
    }
    .btn-explore {
        margin-left: -50px;
    }
    .right-txt {
        padding-top: 25px !important;
    }
    section#our-creative .h2 {
        width: 100% !important;
    }
    section#write .right-text {
        padding-right: 0px !important;
    }
    .right-text {
        padding-top: 25px;
    }
    .nav-button-res .navbar-toggler {
        border-color: white;
    }
    .nav-button-res .navbar-toggler {
        border-color: white;
    }
    section#write .left-img img {
        max-width: 100% !important;
    }
    .sm-section .mt-img {
        margin-top: 15px !important;
    }
    
}
@media (min-width:992px) {
    .hd-wrs{
        width: 72%;
    }
    .left-cont h3 {
        width: 60%;
    }
    .ft-call-bg p {
        text-align: center;
        width: 60%;
    }
    .uniq-bg .h2{
        width: 85% !important;
    }
    .sr-items .ser-range-box {
        height: 250px;
    }
    .sr-items .ser-range-box {
        height: 250px;
    }
    .wdd .sr-items .ser-range-box {
        min-height: 280px;
    }
    .dbp .ser-range-box {
        min-height: 250px !important;
    }
}
@media (min-width:992px) and (max-width:1200px) {
    section#write .left-img img {
    max-width: 100% !important;
    min-width: 100% !important;
    padding-left: 0px !important;
}
#anays a.btn-contact-us svg {
    margin-top: 85px !important;
}
section#write .right-text {
    padding-right: 0px !important;
}
section#write .h3 {
    font-size: 60px !important;
}section#about .h2 {
    font-size: 40px !important;
}
section#our-creative .h2 {
    font-size: 40px !important;
    width: 100% !important;
}
.sm-section .mt-img {
    margin-top: -10px !important; 
}
section#ser-range .h2 {
    font-size: 60px !important; 
}
.ser-range-box {
    height: 310px !important; 
}
section#anays .h2 {
    font-size: 40px !important;
    width: 100% !important;
}
section#banner .h1 {
    font-size: 65px !important;
}
section#banner .subH p {
    font-size: 40px !important;
}
#banner-sr2 .h1 {
    font-size: 70px !important;
}
#banner-sr .h1{
    font-size: 70px !important;
}
.hd-wrs {
    width: 85%  !important;
}
section#write2 .left-img img {
    max-width: 100% !important;
    padding-left: 0px !important;
}

}
.btn-contact-us2 svg {
    max-width: 170px !important;
}
.items-sr p {
    font-size: 17px;
    color: #fff;
    font-weight: 200;
    line-height: 30px;
}
.items-sr {
    text-align: center;
}
.sr-hed li a:hover{
    color: #000 !important;
}
.scroll {
    display: none;
}
.hd-fix .onScroll{
    display: none !important;
}
.hd-fix .scroll{
    display: block !important;
}
section#write2 .left-img img {
    max-width: 530px;
    padding-left: 30px;
}
.left-cont h3 {
    font-size: 65px;
}
section#write .left-img img {
    max-width: 490px;
    min-width: 100px;
    padding-left: 30px;
}
a.btn-contact-sr svg {
    width: 170px;
}
.th-b-color span{
    color: #000;
}
.hd-fix li a.active{
    color: #000 !important;
}
.hd-fix .dropdown-menu li a.active{
    color: #000 !important;
}
.hd-fix li a:hover{
    color: #fff !important;
}
#banner-sr  .h1{
    font-size: 90px;
    color: #fff;
}
#banner-sr2  .h1{
    font-size: 90px;
    color: #fff;
}
#banner-sr  p{
    color: #000;
    font-size: 20px;
    text-align: center;
    width: 80%;
}
#banner-sr2  p{
    color: #000;
    font-size: 20px;
    text-align: center;
    width: 80%;
}
#banner-sr {
    background-image: url(../img/ui-ux-banner.webp);
    height: 650px !important;
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
}
#banner-sr2 {
    display: flex;
    align-items: center;
}
.header-fix{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
option {
    color: #000 !important;
}
option:hover{
    color: #000 !important;
    background:#f26a42 !important;
}
.hd-fix{
    position: sticky !important;
    background-color: #f26a42f2;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}
section#write .right-text {
    padding-right: 100px;
}
section#write form input {
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 0px !important;
}
section#write form textarea {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 0px !important;
}
section#write2 .right-text {
    padding-right: 60px;
    padding-left: 40px;
}
section#write2 form input {
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 0px !important;
}
section#write2 form textarea {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 0px !important;
}
.btn-explore:hover{
    color: #f26a42;
}
section#write .h3 {
    font-size: 60px;
}
section#write2 .h3 {
    font-size: 65px;
}
ul.list-unstyled.list-menu a {
    font-size: 18px;
}
.btn-header svg{
    transition: background 10s;
}
section#our-creative .h2 {
    color: #fff;
    font-size: 60px;
    width: 80%;
    margin-bottom: 15px;
    font-weight:600;
}
#anays .p{
color: #fff;
margin-bottom: 40px;
}
section#anays .h2 {
    color: #fff;
    font-size: 60px;
    width: 100%;
    margin-bottom: 15px;
    font-weight:600;
}
.sm-section .ml-img {
    margin-left: -26px;
    z-index: -1;
    position: relative;
}
.sm-section .mt-img{
    margin-top: -45px;
}
#anays .sm-section .mt-img{
    margin-top: 0px;
}
.sm-section h3 {
    color: #fff;
    font-size: 25px;
    font-weight: 600;
}
.sm-section p {
    color: #fff;
}
section#our-creative .p {
    color: #fff;
    font-size: 17px;
    width: 75%;
}
#anays .btn-contact-us .path:hover path.path1 {
    fill: #fff;
}
.path:hover  path.path2{
    fill: #f26a42;
}
.path:hover path.path1 {
    fill: #fff;
}
#anays .btn-contact-us .path:hover  path.path2{
    fill: #f26a42;
}
.btn-contact-us .path:hover path.path1 {
    fill: #fff;
}
.btn-contact-us .path:hover  path.path2{
    fill: #f26a42;
}
section#ser-range .h2 {
    font-size: 65px;
    color: #fff;
    margin-bottom: 20px;
}
section#ser-range .p {
    color: #fff;
    margin-bottom: 40px;
}
a.btn-contact-us svg {
    width: 300px;
}
a:hover {
    text-decoration: none !important;
}
#projects .h2 {
    color: #fff;
    font-size: 65px;
}
.pr-10{
    padding-right: 28px;
}
#anays a.btn-contact-us svg {
    margin-left: 0px;
    margin-top: 130px;
}
section#about .h2 {
    font-size: 60px;
    color: #fff;
    margin-bottom: 18px;
    font-weight:600;
}
section#about .p {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
}
.btn-header svg:hover  {
    fill: #f26a42;
}
.header-fix {
    z-index: 1000;
}
svg.path:hover{
    filter: drop-shadow( 0px 0px 50px #f26a42);
}
.btn-contact-us svg.path {
    width: 170px !important;
    margin-top:30px;
}
.ser-range-box {
    margin-bottom: 35px;
    border: 1px solid white;
    padding: 35px;
    margin-left: 10px;
    margin-right: 10px;
    transition: background 1.5s ;
}
.ser-range-box:hover {
    background: #f26a42;
    border-color: #f26a42;
}
.ser-range-box:hover h3 span{
   color: #000;
}
.ser-range-box:hover .r-more{
    color: #000;
}
a.r-more {
    color: #f26a42;
    text-decoration: none;
}
.ser-range-box h3 {
    color: #fff;
}
.ser-range-box p {
    color: #fff;
    font-size: 15px;
}
input::placeholder{
    color: #c5c5c5 !important;
  }
select::placeholder{
    color: #8b8b8b !important;
  }
textarea::placeholder{
    color: #8b8b8b !important;
  }
section#write form select {
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 0px !important;
}
section#write2 form select {
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 0px !important;
}
section#banner .h1 {
    font-size: 90px;
    color: #fff;
    letter-spacing: 0px;
}
section#banner .subH p {
    font-size: 50px;
    color: #fff;
    font-weight: 600;
}
.footer-box .list-menu li svg {
    margin-right: 10px;
    margin-top: 5px;
}
.left-cont a {
    color: #fff;
    padding-left: 10px;
}
.left-cont a:hover{
    color: #fff;
}
.left-cont li{
    padding-bottom: 20px;
    align-items: flex-start;
    display: flex;
}
.th-color span{
    color: #F26A42;
}
.footer-box {
    border: 1.8px solid #F26A42;
    padding: 35px 35px 0px;
    border-radius: 2px;
}
.b-top-white{
    border-top: 1px solid rgba(255, 255, 255, 0.8);
}
a.nav-link.active {
    color: #F26A42 !important;
}
@media (min-width:992px) {
    a.nav-link.active2 {
        color: #000 !important;
    }

}
@media screen and (max-width:992px) {
    a.nav-link.active2 {
        color: #F26A42 !important;
    }
    .sr-hed li a:hover{
        color: #fff !important;
    }
    section#write2 .left-img img {
    max-width: 100% !important;
    padding-left: 30px !important;
}
#header .col-6 {
    height: 35px !important;
}
#banner-sr2 .h1 {
    font-size: 65px !important;
}
}
a.nav-link:hover {
    color: #F26A42 !important;
}
@media (min-width:1300px) {
    .container{
        max-width: 1350px;
    }
}
@media (min-width:1200px) {
    .container{
        max-width: 1250px;
    }
    li.space {
        width: 98px;
    }
}
@media (min-width:1100) {
    .container{
        max-width: 1150px;
    }
}
.pt-res-100{
    padding-top: 150px;
}