@font-face {
    font-family: Inter-Regular;
    src: url('fonts/Inter-Regular.otf');
}

@font-face {
    font-family: Inter-SemiBold;
    src: url('fonts/Inter-SemiBold.otf');
}

@font-face {
    font-family: Inter-Light;
    src: url('fonts/Inter-Light.otf');
}

@font-face {
    font-family: Inter-Thin;
    src: url('fonts/Inter-Thin.otf');
}

body {
    font-family: Inter-Regular;
}

.fs-light {
    font-family: Inter-Thin !important;
}

.logo > img {
    max-width: 100px;

}

.logo {
    padding-top: 20px;
    padding-bottom: 20px;

}



.text-muted: {
    color: #565656 !important;
}

.fs45 {
    font-size: 45px;
    font-family: Inter-SemiBold;

}

.fs26 {
    font-size: 36px;
    font-family: Inter-light;
   
}

.fs20 {
    font-size: 20px;
    font-family: Inter-light;
    margin-bottom: 0px
}

.fs18 {
    font-size: 18px;
    font-family: Inter-SemiBold;
    margin-bottom: 0px
}

.fs14 {
    font-size: 13px;
    font-family: Inter-Regular;
    margin-bottom: 0px
}


.hometext {
    font-size: 30px;
    font-family: Inter-Light;
}

.custom-btn {
    border: 2px solid #fff;
    padding: 15px 20px;
    border-radius: 0px;
    font-size: 20px;
    color: #fff
}

.custom-btn:hover {
    border: 2px solid #000;
    padding: 15px 20px;
    border-radius: 0px;
    font-size: 20px;
    background: #fff;
    color: #000;
}

.line {
    background: #707070;
    height: 1px;
    width: 20%;
    margin: 0 auto;
}



.fs30 {
    font-size: 30px;
    font-family: Inter-Thin;

}

.section-bg {
    background: url('image/bg2.png') no-repeat;
    background-size: cover;
    width: 100%
}

.team-box {
    width: 100%;
    padding: 30px
}

.team-image-box {
    height: 300px;
    width: 100%;
    background-position: center;
    background-size: cover;
    margin-bottom: 20px
}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

    .about-title {
        font-family: Inter-SemiBold;
        margin-left: 12%;
        position: relative;
    }

    .about-title::before {
        content: "";
        position: absolute;
        width: 10%;
        border-bottom: 10px solid #088179;
        left: -13%;
        bottom: 5px;
        height: 20px
    }

}

footer {
    background: #000;
    padding: 30px 0px
}

.footerSocialIcons {
    list-style: none;
    margin-left: -35px;
}

.contactDetails {
    list-style: none;
    margin-left: -35px;
}

.footerSocialIcons > li {
    display: inline;
    margin: 0px 15px
}

.footerSocialIcons > li > i {
    color: white;
}

.copyrighted {
    position: relative;
    font-family: Inter-SemiBold;
    padding: 60px;
}

.copyrighted::before {
    content: "";
    position: absolute;
    width: 30%;
    top: -30px;
    left: 35%;
    border-bottom: 1px solid #088179;
    height: 20px
}

.heroDiv {
    background: url('image/heroimg.png') no-repeat;
    background-size: cover;
    height: 100vh;
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

    .about-title {
        margin-left: 12%;
        position: relative;
        font-family: Inter-SemiBold;
    }

    .about-title::before {
        content: "";
        position: absolute;
        width: 10%;
        border-bottom: 10px solid #088179;
        left: -13%;
        bottom: 5px;
        height: 20px
    }

    .heroDiv {
        background: url(image/heroimg.png) no-repeat;
        background-size: cover;
        height: 100vh;
    }

}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

    .heroDiv {
        background: url('image/heroimg.png') no-repeat;
        background-size: cover;
        height: 100vh;
    }

}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    .heroDiv {
        background: url('image/heroimg.png') no-repeat;
        background-size: cover;
        height: 100vh;
    }

}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

    .heroDiv {
        background: url(i'mage/heroimg.png') no-repeat;
        background-size: cover;
        height: 100%;
        background-position: right
    }

}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

    .heroDiv {
        background: url('image/heroimg.png') no-repeat;
        background-size: cover;
        height: 100%;
         background-position: center
    }

}