@import url('https://fonts.googleapis.com/css2?family=Moderustic:wght@300..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    scroll-behavior: smooth !important;
    font-family: "Moderustic", system-ui;
}

:root{
    --background-color:#ffffff;
    --navbar-color:red;
    /* --heading-color:#211a8b; */
    --heading-color:black;
}

::selection{
    background-color: var(--navbar-color) !important;
    color: white !important;
}
.navbar-expand-lg{
    background: var(--background-color) !important;
}

/* .navs123{
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
} */
.js-scroll-trigger{
    font-weight: 550 !important;
    color:black !important;
}
.js-scroll-trigger::after {
    content: '';
    display: block;
    width: 0;
    border-radius: 0px 0px 170px 0px;
    height: 2.5px;
    background:var(--navbar-color);
    transition: width .4s ease-in;
}
.js-scroll-trigger:hover{
    color: var(--navbar-color) !important;
}
.js-scroll-trigger:hover::after {
    width: 100%;
}
.logo1{
    height: 55px !important;
    width: auto !important;
}

.heading1{
    color: var(--heading-color) !important;
    font-weight: bold !important;
}
.heading1::first-letter{
    
    color: var(--navbar-color) !important;
}
/* .heading1::after{
    content: '--';
    color: var(--heading-color);
} */

.item .banner2{
    /* background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.16)), url(../images/banner3.jpg) center; */
    height:569px !important;
    /* padding: 10px !important; */
    width: 100% !important;
    /* background-attachment: fixed !important; */
    background-size: cover !important;
    background-position: center center !important;
}

.dropdown-menu{
    box-shadow: 0px 0px 3px 0px lightgrey;
    border-radius: 0px 0px 5px 5px !important;
    transform: rotateY('20px') !important;
    /* transition: all ease-in-out 0.8s !important; */
}
.company-name-banner1{
    /* text-shadow: 2px -2px 3px black !important; */
}

@media(max-width:600px){
    .item .banner1{
        height: 220px !important;
    }
    .banner1 h2,h1,h4{
        margin-top: -15px !important;
        margin-bottom: 10px !important;
    }
    .about-img1{
        height: 350px !important;
    }
    .sec1{
        background-position: center center !important;
    }
    .cpy2{
        text-align: start !important;
    }
    .web-sec-banner1{
        height: 400px !important;
    }
    .wbp{
        height: 200px !important;
    }
}

.sec1{
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.16)), url(../images/white-back1.jpg) center;
    /* height:569px !important; */
    /* padding: 10px !important; */
    width: auto !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center center !important;
}
/* .sec1 h3,h4{
    color: white !important;
} */

.pera1{
    text-align: justify;
    text-justify: distribute !important;
    /* text-justify: inter-word !important; */
    hyphens: auto !important;
    letter-spacing: 0px !important;
}

.sec1 h6{
    background-color: red;
    box-shadow: 0px 0px 3px 0px black;
    padding: 7px;
    color: white;
    border-radius: 0px 30px 0px 30px;
    text-align: center;
}

.heading2{
    /* color: var(--navbar-color) !important; */
    font-weight:600 !important;
}
.heading2::first-letter{
    color: var(--heading-color);
}
.about-img1{
    height: 450px;
    width: auto !important;
}

.cards1{
    background-color: #ffffff !important;
    box-shadow: 0px 0px 7px 0px #f2f2f2 !important;
    border:0 solid rgb(230, 227, 227) !important;
    border-radius:5px !important;
}

.cards1:hover{
    transition: all ease-in-out 0.6s !important;
    border: 1.5px solid whitesmoke !important;
}
.service-img1{
    height: 70px !important;
    width: 70px !important;
}

.sec2{
    background:rgba(255, 255, 255, 0.945) !important;
}
.training-img1{
    height: 180px !important;
    border-radius: 5px !important;
    width:100% !important;
}

.card{
    height: 100% !important;
}

.buttons1{
    background: var(--navbar-color) !important;
    color: white !important;
    width: 120px !important;
    padding:7px !important;
}

.cards2{
    background-color: #ffffff !important;
    box-shadow: 0px 0px 7px 0px #f2f2f2 !important;
    border:0 solid rgb(230, 227, 227) !important;
    border-radius:5px !important; 
}
.tr-pera1{
    height: 160px !important;
}
.heading1:after{
    content: '__';
    font-weight: bold !important;
    color: red !important;
}
.client-img1{
    height: 100px !important;
    width:auto !important;
    
    background-size: cover !important;
    background-repeat: no-repeat !important;
    /* object-fit: cover !important; */
}
/* .item2 img{
    height: 90px !important;
    width: auto !important;
} */

.contact-img1{
    height: 400px !important;
}
.login-input{
    border-radius: 0px !important;
}

.footer{
    background: black !important;
}
.footer-txt1{
    line-height: 1;
    color: white !important;
}
.footer-txt1:hover{
    transition: all ease-in-out 0.5s !important;
    color: var(--navbar-color) !important;
    padding-left: 8px !important;
}
.email1{
    word-break: break-all;

}

.social-icon1{
    border: 1px solid white !important;
    gap: 5px !important;
    margin: 5px;
    height: 35px;
    padding: 5px !important;
    align-items: center !important;
    text-align: center !important;
    width: 35px;
    color: white !important;
    border-radius: 50px !important;
}
.social-icon1:hover{
    border: 1.5px solid var(--heading-color) !important;
    color: var(--navbar-color) !important;
    background-color: var(--background-color);
}
.cpy2{
    text-align: end;
}   
.dropdown-item::after {
    content: '';
    display: block;
    width: 0;
    border-radius: 0px 0px 170px 0px;
    height: 2.5px;
    background:var(--navbar-color);
    transition: width .4s ease-in;
}
.dropdown-item:hover{
    color: var(--navbar-color) !important;
}
.dropdown-item:hover::after {
    width: 100%;
}

.navbar-toggler{
    color: white !important;
    background: red !important;
}
.navbar-toggler-icon{
    /* color: white !important; */
}

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 20px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 6px; /* Some padding */
    font-weight: bold !important;
    font-size: 25px !important;
    height: 50px !important;
    width: 50px !important;
    border-radius: 50px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
  }
  
  #myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}
.pulse {
    animation: pulse-animation 2s infinite;
}
  
@keyframes pulse-animation {
    0% {
      box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
    }
    100% {
      box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    }
}

.whatsapp-side-btn{
    position: fixed !important; /* Fixed/sticky position */
    bottom: 100px; /* Place the button at the bottom of the page */
    right: 20px !important; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color:#30d14e !important; /* Set a background color */
    color: white !important; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 7px !important; /* Some padding */
    font-weight: bold !important;
    font-size: 25px !important;
    z-index: 9999999 !important;
    height: 50px !important;
    width: 50px !important;
    /* box-shadow: 0px 0px 20px 0px #30d14e !important; */
    border-radius: 50px !important; /* Rounded corners */
    font-size: 25px !important; /* Increase font size */
  }
.navbar-toggler{
    outline: none !important;
    box-shadow: none !important;
}

.team-img1{
    height: 250px !important;
    mix-blend-mode: darken !important;
    width: auto !important;
    cursor: pointer !important;
    border-radius: 7px !important;
}
.team-img1:hover{
    filter: grayscale(20%) !important;
}
.team-name{
    color: red !important;
    cursor: pointer !important;
}

.buttons2{
    background-color: var(--navbar-color) !important;
    border-radius: 100px !important;
    color: white !important;
    width: 80px;
    height: 35px !important;
    padding: 5px !important;
}
.nav-pills .nav-link{
    background-color: lightgray !important;
    color: black !important;
    border-radius: 0px !important;
}
.nav-pills .nav-link.active{
    background-color: blue !important;
    color: white !important;
}
.f-header1{
    font-size: 20px;
}


.social-icon2{
    border: 1px solid red !important;
    gap: 5px !important;
    margin: 1px;
    height: 30px;
    padding: 2.5px !important;
    align-items: center !important;
    text-align: center !important;
    width: 30px;
    color: var(--navbar-color) !important;
    border-radius: 50px !important;
}
.social-icon2:hover{
    border: 1.5px solid var(--heading-color) !important;
    color: var(--navbar-color) !important;
    background-color: black !important;
}
.career1{
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(../images/hire1.jpg) center;
    height:569px !important;
    width:auto !important;
    padding: 0px !important;
    /* background-attachment: fixed !important; */
    background-size: cover;
    /* background-position: center center !important; */
}

.about1{
    background: linear-gradient(rgba(0, 0, 0, 0.239), rgba(0, 0, 0, 0.607)), url(../images/slider1/123.jpg) center;
    height:569px !important;
    padding: 10px !important;
    width: 100% !important;
    background-size: cover !important;
    /* background-position: center center !important; */
}

/* .about1::after{
    content: 'About Us' !important;
    color: white !important;
    font-weight: 550 !important;
    text-align: center !important;
    margin: auto !important;
    align-items: center !important;
    font-size: 30px !important;
} */
.c-card-box1{
    height: 111.5px !important;
}
.subtitle1{
    font-size: 14.5px !important;
    hyphens: none !important;
}

.vision1{
    border-radius: 20px 0px 20px 0px ;
    height: 250px !important;
    /* box-shadow: 10px 10px 1px 10px rgba(0, 0, 0, 0.779); */
    border-right: 7px solid red;
    /* border-left: 7px solid black !important; */
}

.front-tr1{
    height: 486px !important;
    width: 100% !important;
}

.enroll-side-btn1{
    position: fixed; /* Fixed/sticky position */
    top: 300px; /* Place the button at the bottom of the page */
    right: 0px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    padding: 5px;
    writing-mode: vertical-lr;
    background-color: red !important; /* Set a background color */
    color: white !important; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    font-weight: bold !important;
    font-size: 15px !important;
    /* height: 50px !important; */
    /* width: 50px !important; */
    border-radius: 0px !important;
    font-size: 18px; /* Increase font size */
}

.web-sec-banner1{
    background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0)),url(/assets/images/slider1/slider2.jpg);
    background-size: cover;
    object-fit: cover !important;
    height:569px !important;
}
.web-sec-banner2{
    background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0)),url(/assets/images/graphic-tr1.jpg);
    height:569px !important;
    background-size: cover !important;
    background-repeat: no-repeat;
}
.web-sec-banner3{
    background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0)),url(/assets/images/st-slider1/brand1.jpg);
    /* background-position: center center !important; */
    background-size:contain !important;
    /* background-position: center !important; */
    height:569px !important;
    /* object-fit: cover !important; */
    background-repeat: no-repeat !important;
}
.web-sec-banner4{
    background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0)),url(/assets/images/slider1/3d-anim2.jpg);
    background-size: cover;
    object-fit: cover !important;
    height:569px !important;
}
.web-sec-banner5{
    background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0)),url(/assets/images/slider1/android.jpg);
    background-size: contain;
    object-fit: cover !important;
    height:569px !important;
    width: auto !important;
    background-repeat: no-repeat !important;
}
.web-sec-banner6{
    background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0)),url(/assets/images/slider1/digital1.jpg);
    background-size: cover;
    object-fit: cover !important;
    height:569px !important;
}
.web-sec-digital1{
    background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0)),url(/assets/images/slider1/digital2.jpg);
    background-size: cover;
    object-fit: cover !important;
    height:569px !important;
}
.web-sec-banner4marketing{
    background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0)),url(/assets/images/slider1/digital1.jpg);
    background-size: cover;
    object-fit: cover !important;
    height:569px !important;
}
.web-sec-banner7{
    background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0)),url(/assets/images/st-slider1/CRM@3x.jpg);
    background-size:contain !important;
    /* background-position: center !important; */
    height:569px !important;
    /* object-fit: cover !important; */
    background-repeat: no-repeat !important;
}
.web-sec-banner8{
    background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0)),url(/assets/images/slider1/cloud1.jpg);
    background-size: cover;
    object-fit: cover !important;
    height:569px !important;
}
.and-img1{
    height: 260px !important;
    background-size: cover !important;
    width: auto !important;
    border-radius: 25px 0px 25px 0px;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}
.web-sec-banner3 h3{
    color: white !important;
}
.vf-service1{
    height: 200px !important;
    width: 100% !important;
    background-size: cover !important;
    border-radius: 5px !important;
    background-position: center center !important;
}
.icons2{
    font-size: 30px !important;
    font-weight: bold !important;
    color:var(--navbar-color) !important;
}
.web-sec-banner1 h3{
    color: rgb(255, 255, 255) !important;
}
.web-sec-banner1 p{
    color: rgb(0, 0, 0) !important;
}
.wbp{
    background-color: rgba(255, 255, 255, 0.263) !important;
    border-left: 10px solid red !important;
}
.wbp2{
    /* background-color: rgba(255, 255, 255, 0.263) !important; */
    border: 1px solid lightblue !important;
}
.why-tech1{
    border-radius: 50% !important;
    height: 350px !important;
    width: 350px !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    object-fit: cover !important;
}

.circle1{
    height:50px !important;
    width: 50px !important;
    align-content: center !important;
    align-items: center !important;
    border-style: dotted !important;
    border-color: var(--navbar-color) !important;
    border-radius: 50px;
    box-shadow: 0px 0px 2px 0px black !important;
}
.circle1:hover{
    background: var(--navbar-color) !important;
    color: var(--background-color) !important;
}
.icons1:hover{
    color: var(--background-color) !important;
}
.icons1{
    font-size: 25px !important;
    color:black !important;
    font-weight: bold !important;
}

.con-card1{
    border-radius: 0px !important;
    height: 100% !important;
}

.dot1{
    background: red !important;
    padding: 10px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 5px 0px 0px 0px;
    position: absolute !important;;
}
.dot::after{
    background-color: black !important;
    border: 4px solid black !important;
}

.process1{
    border-right: 1.5px solid red;
}

.core-service1 .card:hover{
    background: var(--navbar-color) !important;
    color: var(--background-color) !important;
    cursor: pointer;
    transition: all ease-in-out 0.4s;
}

.digital-banner1{
    height: 450px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    object-fit: cover !important;
}

.digital-tech1{
    background-color: rgba(255, 0, 0, 0.267) !important;
}

.service-img2{
    width: auto !important;
    height: 60px !important;
    background-size: cover !important;
    background-position: center center;
}

.contact-banner1{
    background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0)),url(/assets/images/slider1/contact1.jpg);
    background-size: cover;
    object-fit: cover !important;
    background-position: center;
    height:569px !important;
}

input-radio{
    accent-color: var(--navbar-color) !important;
    
}
.training-img2{
    height:230px !important;
    border-radius: 5px !important;
    border: 0.5px solid black;
    transition: all ease-in-out 0.4s;
    width: 100% !important;
}
.login-card{
    backdrop-filter: blur(2px) !important;
}
.inter1 .card .tr-pera1{
    height: 140px !important;
}

.login-page1{
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.16)),url(../images/login1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

iframe{
    border-radius: 5px !important;
}
@media(max-width:600px){
    .item .banner1{
        height: 180px !important;
    }
    .banner1 h2,h1,h4{
        margin-top: -15px !important;
        margin-bottom: 10px !important;
    }
    .about-img1{
        height: 180px !important;
    }
    iframe{
        height: 200px;
    }
    .sec1{
        background-position: center center !important;
    }
    .cpy2{
        text-align: start !important;
    }
    .web-sec-banner1{
        height: 180px !important;
        background-size:contain !important;
        background-repeat: no-repeat;
    }
    .web-sec-banner2{
        height: 180px !important;
        background-size:contain !important;
        background-repeat: no-repeat;
    }
    .web-sec-banner3{
        height: 180px !important;
        background-size:contain !important;
        background-repeat: no-repeat;
    }
    .web-sec-banner4{
        height: 180px !important;
        background-size:contain !important;
        background-repeat: no-repeat;
    }
    .web-sec-digital1{
        height: 180px !important;
        background-size:contain !important;
        background-repeat: no-repeat;
    }
    .web-sec-banner5{
        height: 180px !important;
        background-size:contain !important;
        background-repeat: no-repeat;
    }
    .web-sec-banner4marketing{
        height: 180px !important;
        background-size:contain !important;
        background-repeat: no-repeat;
    }
    .career1{
        height: 180px !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }
    .web-sec-banner6{
        height: 180px !important;
        background-size:contain !important;
        background-repeat: no-repeat;
    }
    .web-sec-banner7{
        height: 180px !important;
        background-size:contain !important;
        background-repeat: no-repeat;
    }
    .web-sec-banner8{
        height: 180px !important;
        background-size:contain !important;
        background-repeat: no-repeat;
    }
    .contact-banner1{
        height: 180px !important;
        background-size:contain !important;
        background-repeat: no-repeat;
    }
    .digital-banner1{
        background-position: center center !important;
        width: auto !important;
        background-size: contain !important;
        background-size: cover !important;
    }
    .wbp{
        font-size: 14px !important;
    }
    .about1{
        height: 180px !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: unset !important;
    }
    .front-tr1{
        height: 180px !important; 
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }
    .item .banner2{
        height: 180px !important;
        width: auto !important;
    }
    .contact-img1{
        height: 180px !important;
    }
    .b1{
        width: 100% !important;
        line-height: 2 !important;
    }
    .b2{
        width: 100% !important;
        /* line-height: 2 !important; */
        height: auto !important;
    }
    .login-page1{
        background-position: center center;
    }
    .employee-sign{
        background-position: center center;
    }
}



.b1{
    background-color: white !important;
    color: black !important;
    width: 50%;
    padding: 5px !important;
    /* border-radius: 4px 0px 4px 0px !important; */
}
.b2{
    background-color:red !important;
    color: white !important;
    width: 55%;
    padding: 3px !important;
    height: 30px;
    /* border-radius: 4px 0px 4px 0px !important; */
}
.cards123{
    background: black !important;
    border-top: 5px solid red !important;
    border-bottom: 5px solid black !important;
    /* border-radius: 0px 30px 0px 30px !important; */
    color: white !important;
}
.sign-employee input{
    background-color: rgba(255, 255, 255, 0.205) !important;
    border-radius: 20px !important;
}

.sign-employee{
    background-color: rgba(255, 255, 255, 0.395) !important;
    box-shadow: none !important;
    backdrop-filter: filter(10px) !important;
}
.employee-sign{
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.16)), url(../images/net2.jpg);
    background-repeat: no-repeat !important;
    background-position: center center;
    background-size: cover !important;
}