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

body{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

:root{
    --background-color:#ffffff;
    --navbar-color:#2686DF;
    --heading-color:#33ADEE;
    --heading-color2:#144776;
    --hear-icon:white;
    --card-color:#ffffff;
    --them-color :#ff6200;
}
body{
    background-color: var(--background-color) !important;
    font-family:"Montserrat", sans-serif !important;
}

.logo1{
    height: 60px !important;
    width: auto !important;
    background-size: cover !important;
}

.navs1{
    background: rgba(0,0,0,80%);
    padding: 3px !important;
}

.js-scroll-trigger{
    color: var(--background-color);
    font-weight: 550;
    padding: 10px;
    &:hover{
        /* background-color: var(--card-color); */
        padding: 10px;
        transition: all ease-in-out 0.3s;
        color: var(--navbar-color);
    }
}

.navbar-toggler:focus{
    box-shadow: none;
    border: none;
}
.navbar-toggler .fa-bars{
    color: rgba(255, 255, 255, 0.824);
    font-size: 25px;
}

.offcanvas-body, .offcanvas-header{
    background-color: rgba(0,0,0,80%);
}

.offcanvas-header .btn-close{
    border-radius: 0px;
}

.offcanvas.show{
    width: 300px;
    transition: all ease-in-out 0.3s;
}

/*======----Banner1 section CSS----======*/
.banner1{
    height: 600px !important;
    background-image: linear-gradient(rgba(0, 0, 0, 0.765),rgba(0, 0, 0, 0.623)), url('../imgs/banner2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.banner1 .title1{
    font-weight: bold;
    color:var(--background-color);
    font-size: 51px;
    margin-top: 6%;
}

.banner1 font{
    color: var(--heading-color);
    text-shadow: 0px 4px 7px rgba(0, 0, 0, 0.47);
}

.banner1 .subtitle1{
    color: var(--background-color);
    font-size: 18px;
}

.banner1 .arrow-down{
    font-size: 40px;
    color: var(--background-color);
    margin-top: 5%;
    font-weight: bold;
}

/*======----about section CSS----======*/
.about-section1{
    background:#144776;
}

.pad-section{
    padding: 30px 0px;
}

.about-section1 .heading1{
    color: white;
    font-size: 40px;
    font-weight: bold;

    &::first-letter{
        color:rgba(38, 134, 223, 1);
    }
}

.about-section1 .subtitle1{
    text-align: justify;
    hyphens: manual;
    letter-spacing: normal;
    /* line-height:1.2; */
    color: rgba(255, 255, 255, 0.874);
}

.about-section1 .about-img1{
    height: 300px;
    width: auto;
    background-repeat: no-repeat;
    border-radius: 30px;
    background-size: cover;
    border: inset solid #E1E1E1;
}

.about-section1 .buttons1{
    background: var(--navbar-color);
    color: var(--background-color);
    width: 230px;
    border-radius: 50px;
    font-weight: bold;
}

.about-section1 .buttons1 .circle1{
    background: var(--background-color);
    border-radius: 50px;
    height: 20px;
    width: 20px;
    font-size: 18px;
    color: rebeccapurple;
    padding: 4px;
}

.custom-btn {
    background-color: var(--navbar-color);
    color: var(--background-color);
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background 0.3s ease;
}
.arrow-right {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    color: #2d8bf7;
    margin-left: 10px;
    font-size: 14px;
    transition: background 0.3s ease, color 0.3s ease;
}
.custom-btn:hover .arrow-right {
    color: #1d76e5;
}


/*======----Services CSS----======*/

.card{
    height: 100%;
}

.service-section1 .card .image-wrapper{
    overflow: hidden;
    border-radius: 25px 25px 0px 0px;
    cursor: pointer;
}

.service-section1 .card .image-wrapper:hover .service-img1 {
    transform: scale(1.1); /* Zoom in on hover */
}

.service-section1 .card .image-wrapper .service-img1{
    height: 200px;
    transition: all ease-in-out 0.3s;
    border-radius: 25px 25px 0px 0px;
    margin: 0px;
}

.service-section1 .card .image-wrapper{
    margin:0px;
}

.service-section1 .card{
    border-radius: 25px;
}

.service-section1 .card .title1{
    font-size: 20px;
    text-align: center;
    margin:-9px 0px 0px;
    font-weight: bold;
    color: var(--heading-color2);
}

.service-section1 .card .subtitle1{
    text-align: justify;
    /* text-justify: inter-word; */
    line-height: 1.5;
    word-spacing: normal;
    letter-spacing: 0; 
    word-spacing: 0;
    font-size: 15px;
    hyphens:auto;
    margin: auto;
}


.heading1{
    font-weight: bold;
    text-align: center;

    &::first-letter{
        color: var(--heading-color2);
    }
}


/*======----CTA Section CSS----======*/

.cta-section1{
    background-image: linear-gradient(40deg, rgb(0 0 0 / 46%), rgb(0 0 0 / 40%)), url('../imgs/cta1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 400px;
}

.cta-section1 .heading{
    color: var(--background-color);
    font-weight: bold;
    /* font-size: 62px; */
    text-align: center;
}


/*======----Technology we work with Section CSS----======*/

.we-work-section1 .card .technology-img1{
    height:65px;
    width:65px;
    display: flex;
    align-items: center;
    mix-blend-mode: multiply;
    justify-content: center;
    margin: auto;
    /* width:auto; */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.we-work-section1 .card{
    height: 100%;
    border: 1px solid #45454529;
    box-shadow: 0px 0px 82px 0px #ffffffe8;
    border-radius: 25px;
}

/*======----Internship Section CSS----======*/

.internship-section1 .card .internship-image{
    height: 200px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 25px 25px 0px 0px;
}

.internship-section1 .card .points1{
    margin: 0px;
    font-size: 15px;
}

.internship-section1 .card .points1 .bi-check-circle{
    color:green;
}

.internship-section1 .card .title1{
    font-size: 20px;
    text-align: center;
    /* margin:-9px 0px 0px; */
    font-weight: bold;
    color: var(--heading-color2);
}

.internship-section1 .card .second-title{
    font-weight: bold;
    font-size: 15px;
}

.internship-section1 .card{
    border-radius: 25px;
}

.internship-section1 .card .card-footer{
    margin: 0px;
    padding: 0px;
    border-radius: 0px 0px 25px 25px;
}

.internship-section1 .card .card-footer .apply1{
    background: var(--heading-color2);
    width: 100%;
    font-weight:550;
    border-radius: 0px 0px 25px 25px;
    padding: 8px 0px;
    margin: 0px;
    color: var(--background-color);
}

/*======----Contact section CSS----======*/

.contact-section1{
    background-image: linear-gradient(40deg,rgba(20, 71, 118, 0.75), rgba(0, 0, 0, 0.436)), url('../imgs/banner2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 430px;
    background-position: center;
}

.contact-section1 .heading1{
    color: var(--background-color);

    &::first-letter{
        color: var(--background-color);
    }
}

.contact-section1 input,textarea{
    border-radius: 50px;
    text-indent: 15px;
    background: transparent !important;
    color: var(--background-color);
    border: 1.5px solid var(--background-color);

    &:focus{
        background-color:transparent;
        color: var(--background-color);
        box-shadow: none;
        border: 1.5px solid var(--background-color);
    }

    &::placeholder{
        color: var(--background-color);
    }
}

.contact-section1 textarea{
    border-radius: 25px;
    border: 1.5px solid var(--background-color);
    color: var(--background-color);
    &::placeholder{
        color: var(--background-color) !important;
    }
}

.contact-section1 .contact-img1{
    margin-top: -27%;
    height: 455px;
    width: auto;
    display: flex;
}

/*======----Media Query CSS----======*/

@media(max-width:600px){
    .pad-section{
        padding: 16px;
    }
    
    .about-section1 .about-img1{
        height: 250px;
    }
    .banner1{
        margin: 76px 0px 0px;
        height: 250px !important;
    }
    .banner1 .title1{
        font-size: 27px;
    }
    .banner1 .arrow-down{
        margin: 0px;
    }
    .about-section1 .subtitle1{
        font-size: 15px;
    }
    .cta-section1{
        height: 300px;
    }
    .cta-section1 .heading{
        font-size: 30px;
    }
    .contact-section1 .contact-img1{
        display: none;
    }
}

.sbt-btn1{
    background: var(--background-color);
    color: var(--heading-color2);
    border-radius: 50px;
    font-weight: bold;

    &:hover{
        background-color: var(--heading-color2);
        color: var(--background-color);
        transition: all ease-in-out 0.3s;
    }
}