@font-face {
    font-family: 'titilium-web';
    src: url(./fonts/titillium-web.woff) format('woff');
}

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

  
 


body,h1, h2, h3 ,p,li,a,button{ font-family: "Roboto", sans-serif; }
ul li {  list-style-type: none;}Z
ul li a{text-decoration: none;}
a{text-decoration: none!important;}
h2{font-size: 2rem; padding: 0.8rem 2rem; }

.container.sec-content{max-width: 1110px;}
.section-heading{font-size: 36px; width: 40%;padding: 5rem 0rem 3.5rem;font-weight: bold;} 
.toggle{color: black!important;}
.black{background-color: rgba(2, 3, 3, 0.6)!important;}
.btn-yellow{display: inline-block; padding: 15px 27px; text-decoration: none; color: white; background-color: #fbaf17; font-weight: bold; font-size: 16px; border-radius: 5px;}
.btn-yellow:hover{color: #fbaf17; background-color: white; transition:ease-in 0.3s;}

.header{ position: fixed; top: 0; width: 100%; z-index: 100; background-color: rgba(2, 3, 3, 0.4);}
.header .nav-sec{ align-items: center;}
.header .nav-bar{ display: flex; justify-content:end; align-items: center; }
.header .nav-bar ul li{ padding: 30px 20px;} 
.header .nav-bar ul li a{ color: white; text-decoration: none; font-size: 16px; font-weight: 300;}
.header .nav-bar ul li a:hover{color: #fbaf17;}
.header .logo img{width: 7rem;}


.header .nav-mob{display: none;}
.header .nav-mob button{ font-size: 1.5rem; background-color: transparent; border: none;}
.header .nav-mob button span i{color: white;}
.header .nav-mob ul{padding-left: 20px; padding-top:30px ;}
.header .nav-mob ul li{padding-bottom: 15px;}
.header .nav-mob ul li a{color:white; font-size: 18px; text-decoration: none; padding: 1rem 0; }

.header .offcanvas{background-color: rgb(10 25 46); width: 86%;}
.header .offcanvas button{color: white !important;}
.header .offcanvas-header{justify-content: space-between; background-color:rgba(2, 3, 3, 0.25) }
.header .offcanvas-header img{width: 30px;}

.hero-sec .content{background-image: url("./images/slider-bg1.jpg"); background-size: cover; width: 100%; height: 100%; padding: 11rem 0 6rem;}
.hero-sec .heading-main{color: white; font-size: 65px; font-weight: bold; margin-bottom: 15px;}
.hero-sec p{color: white; font-size: 18px; margin-bottom: 70px;} 


.aboutus {padding-top: 5rem;}
.aboutus h2{ border-left: 4px solid black; font-weight: bold;}
.aboutus p{margin: 2.5rem 0;}
.aboutus .divider{border-bottom: 1px solid black; margin-top: 1.8rem}
.aboutus .sec-content{ border-bottom: 2px solid black; padding-bottom: 5rem;}
.aboutus .no-div{display: none;}

.aboutus .about{padding-right: 1.8rem!important;}
.aboutus .solutions{border-radius: 30px; box-shadow: 0px 0px 14px 5px lightgray; padding: 60px;}
.aboutus .solutions h2{border: none; padding: 0; font-weight: bold;}
.aboutus .solutions ul{padding: 0;}
.aboutus .solutions ul li{ color: #fbaf17; font-size: 1.3rem; font-weight: bold;}
.aboutus .solutions p{margin: 15px 0px;}
.aboutus .customers{padding-top: 2rem;}
.aboutus .customers img{width: 100px;}

.industries{ margin-bottom:7rem ;}
.industries img{width: 100%;}
/* .industries h2{text-align: center; padding: 80px 0px 60px;  text-transform: uppercase; font-weight: bold;}  */
.industries .ind-title{  position: absolute; background: rgba(0, 0, 0, 0.5); bottom: 0px; padding: 10px; width: 100%;  display: flex;justify-content: space-between; align-items: center;}
.industries .ind-title p{font-size: 1.2rem ; color: white; margin: 0;}
.industries .ind-title a{color: white; font-size: 14px;}
.industries .ind-content{position: relative; margin-bottom: 20px; overflow: hidden;}
.industries .ind-content img{ max-width: 100%; transition: all .6s;}
.industries .ind-content img:hover{ transform: scale(1.13);}

.footer {background-color: rgba(3, 13, 28); }
.footer h2{padding: 0; margin-bottom: 1.5rem; line-height: 0.1;}
.footer h2 a{color: #fbaf17; text-transform: uppercase; font-size: 1rem; font-weight: bold;}
.footer p{color: white; margin-bottom: 10px;}
.footer .row{justify-content: space-between; padding-bottom: 4rem;}
.footer .social-icons{ display: flex; justify-content: center; padding: 4rem;}
.footer .social-icons span{ margin-right: 0.6rem;}
.footer .social-icons span i{color:#fbaf17; font-size: 2rem;}
.footer .social-icons span i:hover, .footer h2 a:hover{color:white;}
.footer .copyright-bar{ background-color: rgba(2, 3, 3, 0.25); padding: 20px 0px;}
.footer .copyright-bar p{ text-align: center; margin: 0;}


.sol .img-bg{background-color: #fbaf17;}
.sol img{width: 100%; height: 100%; object-fit: contain; position: relative; top: 10px; right: 10px; z-index: 2;}
.sol .bg-main{height: 100%;}
.sol .sec-content .row{justify-content: space-between;}    
.sol .sec-content p{padding-top: 50px;}
.sol .center-banner{text-align: center;padding-bottom: 7rem;}
.sol .center-banner .btn-yellow:hover{border: 2px solid #fbaf17;}
.sol .dots{position: absolute; width: 200px; position: absolute; width: 20%; z-index: 1; right: 10%; top: 138px;}


.sol.process{margin-bottom: 4rem;}
.sol.process h3{font-size: 36px; width: 40%;padding: 5rem 0rem 3.5rem;font-weight: bold;}
.sol.process .r-panel{justify-content: right;}
.sol.process .r-panel .content{border-left: 1px solid black;}
.sol.process .l-panel{justify-content: left;}
.sol.process .l-panel .content{border-right: 1px solid black;}
.sol.process .content{ padding: 2rem 6rem; text-align: left;}
.sol.process .content h2{font-weight: bold; padding-left: 0;}
.sol.process .right{padding-left: 0;}
.sol.process .left{padding-right: 0;}
.sol.process .right .number{ position:  relative; left: -7%;}
.sol.process .left .number{position: relative; right: -93%;}
.sol.process .number span{background-color: white; color: #fbaf17; font-size: 3rem; padding: 0.8rem 2rem; border: 2px solid black; border-radius: 50%;}
.sol.process .row:last-of-type .content{border: none;}

.contactus.hero-sec .heading-main{font-size: 3rem; padding-bottom: 3rem;}
.contactus.hero-sec .content{ padding: 8rem 0 6rem; height: 100%;}
.contactus.hero-sec .content .row{justify-content: space-between; align-items: center;}
.contactus.hero-sec .form-sec {display: flex; position: relative; height: 100%;}
.contactus.hero-sec .cnct-form {border-radius: 30px; background-color: white;}
.contactus.hero-sec .cnct-form .en-form{padding: 2rem 4rem 5rem;}
.contactus.hero-sec.hero-sec .content a:hover{border: 2px solid #fbaf17;}

.contactus.org-details{padding-bottom: 5rem;}
.contactus.org-details .row{justify-content: center;}
.contactus.org-details .location{font-weight: bold; font-size: 20px; padding-top: 1rem;}
.contactus.org-details p{ margin: 0;}
.contactus.org-details .add-detail{text-align: center;}
.contactus.org-details iframe{width: 100%; height: 500px;}

.contactus.hero-sec .form-row { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 2rem 0rem; }
.contactus.hero-sec .form-row input{ margin-bottom: 22px;}
.contactus.hero-sec .en-form h1{text-align: center; padding-bottom: 30px;}
.contactus.hero-sec .en-form button {margin-top: 40px;}
.contactus.hero-sec .form-row label {margin-bottom: 10px; color: grey;}
.contactus.hero-sec .form-row .services {padding:7px 30px;}

.aboutus-sec.values .row{justify-content: space-between;}
.aboutus-sec.props{ margin: 4rem 0 4rem;}
.aboutus-sec.props .content{ background-color: #011F4F; border-radius: 35px; padding-top: 2.5rem;}
.aboutus-sec.props h2{color: white; border-bottom: 1px solid white; padding-bottom: 1rem; padding-left: 0; font-size: 1.2rem; font-weight: bold;}
.aboutus-sec.props p{color: white; padding: 1rem 0 2rem;}
.aboutus-sec.props .item{padding: 0 2rem;}
.aboutus-sec.team{padding-bottom: 4rem;}

.aboutus-sec.team .t-name{font-weight: bold; padding-top: 1.5rem; margin: 0;}


@media only screen and (min-width: 786px) and (max-width:1024) {
    .hero-sec .content{height: 100%!important;}
}

@media only screen and (max-width: 786px){
    .btn-container{display: flex; justify-content: center;}
    .section-heading{width: 100%; text-align: center;}
    .header .nav-bar {display: none;}
    .header .nav-mob {display: block; text-align: end;}
    .header .logo img{width: 4rem;}
    .hero-sec .heading-main{font-size:3.5rem}
    .hero-sec .sec-content span{display: flex; justify-content: center;}
    .hero-sec .content{padding-bottom: 4rem; height: 100%; }
    .hero-sec .content a{display: flex; justify-content: center;}
    .aboutus{padding-top: 4rem;}
    .aboutus .about{padding-bottom: 3rem;}
    .aboutus .customers{text-align: center;}
    .aboutus .customers img{padding-bottom: 3rem;}
    .aboutus .no-div{display: block;}
    .industries{padding:2rem; margin-bottom: 0;}
    .industries h2{padding:0 0 2rem;}
    .footer h2{line-height: 1;padding-top: 1rem;}

    
    .sol .sec-content .row{flex-direction:column-reverse ;}
    .sol .sec-content .img-bg{margin: 1rem;}    
    .sol .content{ padding-top: 4rem;}
    .sol .dots{display: none;}

    .sol.hero-sec .heading-main{padding-top: 2rem;}
    .sol.process h3{width: 100%; padding: 3rem 0rem;}
    .sol.process .number{text-align: left;}
    .sol.process .content{ padding: 2rem 1rem; text-align: left;}
    .sol.process .r-panel, .sol.process .l-panel{padding: 0px 20px;}
    .sol.process .right .number{ position:  relative; left: -46px;}
    .sol.process .left .number{position: relative; left: -46px; right: 0}
    .sol.process .r-panel .content{border-left: 1px solid black; border-right: none ;}
    .sol.process .l-panel .content{border-left: 1px solid black; border-right: none ;}
    .sol.process .right,.sol.process .left{padding: 0px 30px;}

    .contactus.hero-sec .content{padding: 8rem 0rem 4rem;}
    .contactus.hero-sec .cnct-form .en-form { padding: 2rem 1rem 5rem;}

    .aboutus-sec.hero-sec .content{padding-top: 7rem;}
    .aboutus-sec .heading-main{font-size: 3rem;}
    .aboutus-sec.values .aboutus{padding-top:1rem;}
    .aboutus-sec.props{margin: 0;}
    .aboutus-sec.team{text-align: center;}
    .aboutus-sec.team img{width: 100%;}
    .aboutus-sec.team .section-heading{width: 100%;}

}

@media (min-width: 1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl 
        {max-width: 1280px;}
    }


    /* SM MENU  */

@media (min-width: 768px) {

    /* Switch to desktop layout
    -----------------------------------------------
    These transform the menu tree from
    collapsible to desktop (navbar + dropdowns)
    -----------------------------------------------*/
    /* start... (it's not recommended editing these rules) */
    .sm-menu ul{position:absolute;width:12em;}
    .sm-menu li{float:left;}
    .sm-menu.sm-rtl li{float:right;}
    .sm-menu ul li,.sm-mytheme.sm-rtl ul li,.sm-mytheme.sm-vertical li{float:none;}
    .sm-menu a{white-space:nowrap;}
    .sm-menu ul a,.sm-mytheme.sm-vertical a{white-space:normal;}
    .sm-menu .sm-nowrap > li > a,.sm-mytheme .sm-nowrap > li > :not(ul) a{white-space:nowrap;}
    /* ...end */


    /* Your rules to style the menu in desktop view here... */
}