@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

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

@font-face {
    font-family: 'DinNext';
    src: url(./fonts/DINNextLTProRegular.woff2) format('woff');
}



a{text-decoration: none; letter-spacing: 1px;}
body{font-family: "DinNext"; letter-spacing: 1px;}
li { list-style-type: none;}
.heading-main{ /* font-family: "Playfair Display"; */ color: white; font-weight: 700; line-height: 6rem; font-size: 5rem; margin-bottom: 0px;}
.heading-blue{color: #004682; text-transform: uppercase; font-weight: bold; padding-bottom: 30px; font-size: 32px;}
.heading-white{color: white; font-weight: bold; font-size: 35px;}
.sub-heading{font-size: 36px; font-weight: bold; margin: 27px 0px;}
.text{font-size: 18px; color: #6d6d6d; margin-bottom: 2rem;}
.modal-backdrop.show{opacity: 0.8;}




/* Hero Section */
.hero-sec{height:40vh;  background-size: cover;  display: flex; align-items: center; position: relative; z-index: 2;}
.hero-sec::before{position: absolute; content: ""; height: 100%; width: 100%; background: #141517; opacity: 0.7; z-index: -1;}
.hero-sec .content{color: white; padding-left: 7rem;}
.hero-sec .content p{font-size: 25px;}

/* Header */

.header{font-family: "DinNext"; padding-bottom: 10px;}
.header .row{ align-items: center;}
.header .nav-desk{ display: flex; justify-content:end; align-items: center; font-family: "Apercu";padding-top: 10px;}
.header .nav-desk ul li{ padding: 0px 20px;} 
.header .nav-desk a{ font-family: "DinNext"; color: #0c1933; text-decoration: none; font-size: 16px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px;}
.header .nav-desk a:hover{color: #ad0304;}
.header .nav-btn {margin-left: 15px;}
.header .nav-btn a{background-color: #ad0304; color: white; border: 2px solid white; padding: 10px 12px;}
.header .nav-btn a:hover{background-color: white; border: 2px solid #ad0304;  transition: all 0.5s;}

.header .sm-menu{display: flex;}
.header .sm-menu .sub-menu li{padding-top: 20px; border: none;}
.header .sm-menu ul.sub-menu{box-shadow: 0px 1px 2px lightgray; background-color: white; margin-top: 32px!important; padding:5px; padding-bottom: 20px; border-top: 3px solid #ad0304;}


.header .nav-mob{display: none;}
.header .nav-mob button{ font-size: 28px; color: black; background-color: white; padding: 10px 20px; border: none; margin-top: 20px;}
.header .nav-mob ul{padding-left: 20px; margin-top: 30px;}
.header .nav-mob ul li{padding-bottom: 15px;}
.header .nav-mob ul li a{color:black; font-size: 19px; text-decoration: none;}
.header .nav-mob ul li a:hover{ color: #015981;}
.header .nav-mob ul li a span i{padding-right: 5px; color: #ad0304;}
.header .nav-mob .sm-menu .sub-menu li a{font-size: 15px;}
.header .nav-mob ul li a.has-submenu{display: flex; justify-content: space-between;}

.header .offcanvas{background-color: white; width: 85%;}
.header .offcanvas .btn-x{ position: absolute; right: 0; margin: 0; background-color: transparent; color: black; }

.header .nav-mob .sub-arrow{size:40px ;}
.header .nav-mob .sub-arrow::before {font-family: 'Fontawesome'; font: var(--fa-font-solid); content: '\f107';}
.header .nav-mob a.btn-mobmenu{background-color: #ad0304; color: white; display: inline-block; padding: 10px; margin-bottom: 40px; text-decoration: none;}

.header .nav-mob .contact-info p{ border-bottom:  3px solid #ad0304; font-weight: bold; padding-bottom: 20px; font-size: 18px; padding-bottom: 5px; }

/* 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... */
    }



    .slider-sec { position: relative; background-color: #1a1a1a; min-height: 85vh; margin-bottom: 60px; }
    .slider-sec .owl-carousel { position: relative; }
    .slider-sec .owl-carousel .owl-item img { height:85vh; filter: brightness(0.4); display: block; width: 100%; object-fit: cover;}
    .slider-sec .owl-theme .owl-dots{ position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 100; }
    .slider-sec .owl-theme .owl-dots .owl-dot span{width: 12px!important; height: 12px!important;}
    .slider-sec .s-content{  color: white; position: absolute; top: 30%; z-index: 1000; left: 7%;}
    .slider-sec .s-content h1{ color: white; font-weight: 700; line-height: 6rem; font-size: 5rem; margin-bottom: 35px;}
    .slider-sec .s-content p{ font-family: "DinNext"; font-size: 25px; letter-spacing: 1px;}
    .slider-sec .s-content button,
    .slider-sec .s-content .banner-btn{ display: inline-block; background-color: transparent; padding: 14px 40px; color: white; border: 2px white solid; font-size: 20px; letter-spacing: 1px; text-decoration: none; transition: all 0.3s ease;}
    .slider-sec .s-content button:hover,
    .slider-sec .s-content .banner-btn:hover{background-color: #ad0304; border-color: #ad0304;}

    .team-sec { padding: 50px 0; background: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%); position: relative;}
    .team-sec::before{ content: ''; position: absolute; top: 0; left: 0; width: 200px; height: 200px; background: radial-gradient(circle, rgba(228,89,8,0.05) 0%, transparent 70%); pointer-events: none;}
    .team-sec::after{ content: ''; position: absolute; bottom: 0; right: 0; width: 250px; height: 250px; background: radial-gradient(circle, rgba(0,70,130,0.04) 0%, transparent 70%); pointer-events: none;}
    .team-sec .container{ position: relative; z-index: 1;}
    .team-sec .row{ align-items: center;}
    .team-sec img{ width: 100%; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.1);}
    .team-sec .t-img{ position: relative; margin-bottom: 0px; padding-right: 40px;}
    .team-sec iframe{ height:315px; position: absolute; bottom:0; left: 0; padding: 10px 10px 0px; background-color: #fff; z-index: 100;}
    .team-sec .col-lg-6:last-child{ padding-left: 40px;}
    .team-sec h3{ color: #e45908; font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 12px; position: relative; padding-left: 20px;}
    .team-sec h3::before{ content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 2px; background-color: #e45908;}
    .team-sec .sub-heading{ font-size: 2.5rem; font-weight: 800; color: #0c1933; line-height: 1.2; margin-bottom: 20px; letter-spacing: -0.5px;}
    .team-sec .text{ font-size: 17px; line-height: 1.7; color: #555; margin-bottom: 18px; text-align: justify;}
    .team-sec .t-btn{ margin-top: 25px;}
    .team-sec .t-btn a{ display: inline-block; border: 2px solid #004682; padding: 15px 40px; background-color: #004682; color: white; font-size: 16px; letter-spacing: 2px; text-decoration: none; text-transform: uppercase; font-weight: 700; border-radius: 8px; transition: all 0.4s ease; box-shadow: 0 4px 15px rgba(0,70,130,0.2);}
    .team-sec .t-btn a:hover{ background-color: transparent; color: #004682; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,70,130,0.3);}

    .proj-sec{padding-bottom: 0px;}
    .proj-sec .sec-header{background-color: #0c1933; padding-bottom: 30px;}
    .proj-sec .pre-heading{ color:#ae0404; font-size: 14px; font-weight: bold; letter-spacing: 1px;}
    .proj-sec .pre-heading::before{ content: '\23AF'; position: relative; font-size: 40px; top: 7px; padding-right: 8px;}
    .proj-sec .heading{display: flex; justify-content: space-between; }
    .proj-sec .red-btn{background-color: #ad0304; border-radius: 6px; padding: 15px 30px; color: white; font-weight: bold;}
    .proj-sec .red-btn:hover{background-color: white; color: #ad0304; transition: all 0.5s ;}

    .proj-sec .cards-sec{position: relative; height: 60vh;}
    .proj-sec .cards-sec .overlay{height: 30vh; position: relative;background-color: #0c1933;}
    .proj-sec .cards-sec .proj-cards {position: relative; bottom: 210px;}
    .proj-sec .cards-sec .proj-cards .item{border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: transform 0.3s ease, box-shadow 0.3s ease;}
    .proj-sec .cards-sec .proj-cards .item:hover{transform: translateY(-8px); box-shadow: 0 8px 25px rgba(0,0,0,0.4);}
    .proj-sec .cards-sec .proj-cards img{height: 400px!important; width: 100%; object-fit: cover; object-position: center; display: block; transition: filter 0.3s ease;}
    .proj-sec .cards-sec .proj-cards img:hover{filter: brightness(0.5);}
    .proj-sec .cards-sec .card-content{position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 400px;}
    .proj-sec .cards-sec .card-content h3{ font-weight: bold; bottom: 0; width: 100%; padding: 20px; color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 7px; margin: 0; z-index: 2; position: absolute; line-height: 1.3;}
    .proj-sec .cards-sec .img-overlay{width: 100%; height: 50%; background: linear-gradient(0deg,rgba(0,0,0,0.9),transparent 96.34%); position: absolute; bottom: 0; left: 0; z-index: 1;}

    #proj-cards.owl-carousel .owl-nav button{font-size: 59px; color: white; position: absolute;top: 29%; background-color: rgba(0, 0, 0, 0.8);}
    #proj-cards.owl-carousel .owl-nav button.owl-next{right: 0;}
    #proj-cards.owl-carousel .owl-nav button.owl-prev{left: 0;}
    
    .proj-sec .bottom-btn{display: none;}
    
    .proj-display{ text-align: center; padding: 80px 0 60px; background: linear-gradient(135deg, #e8f1f8 0%, #f0f4f8 25%, #f8fafb 50%, #eef5f9 75%, #e8f1f8 100%); position: relative;}
    .proj-display::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: radial-gradient(circle at 20% 50%, rgba(0,70,130,0.04) 0%, transparent 50%), radial-gradient(circle at 80% 50%, rgba(173,3,4,0.03) 0%, transparent 50%); pointer-events: none;}
    .proj-display .pre-text{ display: inline-flex; font-size: 14px; background-color: #ad0304; color: white; font-weight: 600; padding: 8px 24px; margin-bottom: 15px; letter-spacing: 2px; border-radius: 30px; position: relative; z-index: 1;}
    .proj-display h2{ margin-bottom: 20px; color: #0c1933; font-weight: 700; font-size: 2rem; letter-spacing: -0.5px; text-transform: uppercase; position: relative; z-index: 1; line-height: 1.2;}
    .proj-display h2 span{ color: #c37300}
    .proj-display h3{ font-size: 26px; color: white; font-weight: 700; margin: 0; text-align: center; text-transform: uppercase; letter-spacing: 1.5px; position: relative; z-index: 2;}
    .proj-display .row{ justify-content: center;}
    .proj-display .item{ border: none; margin: 20px; padding: 0; background: white; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.12); overflow: hidden; position: relative;}
    .proj-display .item::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(0,70,130,0.85) 0%, rgba(173,3,4,0.75) 100%); opacity: 0; transition: opacity 0.5s ease; z-index: 1;}
    .proj-display .item:hover::before{ opacity: 1;}
    .proj-display .item:hover{ transform: translateY(-15px); box-shadow: 0 20px 60px rgba(0,0,0,0.25);}
    .proj-display .item a{ display: block; overflow: hidden; position: relative;}
    .proj-display .item img{ width: 100%; height: 420px; object-fit: cover; object-position: center; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); display: block;}
    .proj-display .item:hover img{ transform: scale(1.1);}
    .proj-display .item h3{ position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: calc(100% - 60px); padding: 20px 30px; background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); border-radius: 12px; transition: all 0.5s ease;}
    .proj-display .item:hover h3{ bottom: 40px; background: rgba(0,0,0,0.8);}
    .proj-display .cate{ color: #c37300; text-align: left; font-size: 14px; font-weight: bold; margin-bottom: 6px; margin-top: 10px;}
    .proj-display .center-item{ box-shadow: 0 10px 40px rgba(173,3,4,0.2);}
    .proj-display .center-item::before{ background: linear-gradient(135deg, rgba(12,25,51,0.9) 0%, rgba(173,3,4,0.85) 100%);}

    .blog-sec{ background: linear-gradient(135deg, #0a1729 0%, #0c1933 50%, #0f1f3d 100%); text-align: center; padding: 80px 0px 80px; letter-spacing: 2px; position: relative;}
    .blog-sec::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 30%, rgba(195,115,0,0.06) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(173,3,4,0.04) 0%, transparent 50%); pointer-events: none;}
    .blog-sec h2{color: white; font-weight: 700; margin-bottom: 60px; font-size: 2.5rem; position: relative; z-index: 1; letter-spacing: -0.5px;}
    .blog-sec h2 span{color: #c37300;}
    .blog-sec p{color: white;}
    .blog-sec .container{ position: relative; z-index: 1;}
    .blog-sec .card{ padding: 0; height: 100%; border: none; border-radius: 16px; overflow: hidden; background: white; box-shadow: 0 10px 40px rgba(0,0,0,0.3); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);}
    .blog-sec .card:hover{ transform: translateY(-12px); box-shadow: 0 20px 60px rgba(0,0,0,0.4);}
    .blog-sec .card img{ width: 100%; height: 280px; object-fit: cover; object-position: center; transition: transform 0.6s ease;}
    .blog-sec .card:hover img{ transform: scale(1.08);}
    .blog-sec .card .card-body{ padding: 30px 25px 20px;}
    .blog-sec .card .card-body h2{ color: #0c1933; font-size: 22px; text-align: left; font-weight: 700; margin-bottom: 15px; line-height: 1.3; letter-spacing: -0.3px;}
    .blog-sec .card .card-body p{ text-align: left; letter-spacing: 0px; font-size: 16px; color: #555; line-height: 1.6; margin-bottom: 0;}
    .blog-sec .card .card-btn{ text-align: left; padding: 0 25px 30px;}
    .blog-sec .card .card-btn a{ border: 2px solid #c37300; color: #c37300; font-weight: 700; border-radius: 8px; padding: 12px 28px; display: inline-flex; text-decoration: none; transition: all 0.3s ease; font-size: 14px; letter-spacing: 1px;}
    .blog-sec .card .card-btn a:hover{ background-color: #c37300; color: white; transform: translateX(5px);}
    
    .footer{background-color: #0c1933; color: white;padding-top: 3rem;}
    .footer a{ color: white; text-transform: uppercase; font-size: 15px; }
    .footer .logo{ display: flex; align-items: center;}
    .footer .logo img{padding-right: 3rem;width: 250px;}
    .footer .logo li{padding-bottom: 1rem;}
    .footer nav {display: flex; justify-content: right;}
    .footer nav ul{display: flex;}
    .footer nav ul li{padding-left: 2rem;}
    .footer nav a{font-weight: bold;}
    .footer .copyright-bar{padding: 1rem 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
    .footer .copyright-bar p{font-size: 13px;text-align: center; letter-spacing: 3px; text-transform: uppercase; color: white; margin: 0;}
    .footer .social-links{display: flex; gap: 20px;}
    .footer .social-links a{color: white; font-size: 18px; transition: all 0.3s ease;}
    .footer .social-links a:hover{color: #ffd700; transform: scale(1.1);}

    /* Portfolio Page */
    
    .portfolio .prod-sec {margin:50px 0px;}
    .portfolio .prod-sec .tabs{margin: 40px 0 30px;}
    .portfolio .prod-sec .tabs a{display: inline-block; padding: 10px 60px; background-color: #1e5c95; color: white; font-family: "Raleway", sans-serif;}
    .portfolio .prod-sec .prod-cards .item-wrapper{margin-bottom: 30px;}
    .portfolio .prod-sec .prod-cards img{width: 100%; height: 280px;}
    .portfolio .prod-sec .prod-cards .item{background-color: #0c1933; color: white; height: 100%; }
    .portfolio .prod-sec .prod-cards .item-footer{padding: 25px;}
    .portfolio .prod-sec .prod-cards .item-footer p{margin: 10px 0 0; font-family: "Raleway", sans-serif; text-transform: uppercase;}
    .portfolio .prod-sec .prod-cards .item-footer h3{text-transform: uppercase; font-size: 18px; font-family: "Raleway", sans-serif;}

    /* Contact Us Page */
    .contactus .contact-info{display: grid; grid-template-columns: auto auto auto ; padding: 75px 0px 45px;}
    .contactus .contact-info .content{justify-content: center; text-align: center;}
    .contactus .contact-info i{color: #004682; font-size: 40px; padding-bottom: 20px;}
    .contactus .contact-info h3{color: #004682; font-size: 22px; font-weight: bold;}
    .contactus .contact-info p,.contactus .contact-info a{text-transform: uppercase; font-size: 18px; font-weight: bold; letter-spacing: 1px; color: black;}

    .contactus .contact-form{text-align: center; background-color: #efefef; padding: 50px 0 100px; }
    .contactus .contact-form h2{color: #004682; font-size: 28px; font-weight: bold; padding-bottom: 20px;}
    .contactus .contact-form .form{display: flex; flex-direction: column; align-items: center;}
    .contactus .contact-form .form-control{margin-top: 25px;color: grey; font-size: 16px;}
    .contactus .contact-form .btn-submit{width: 100%; background-color: #118348; border: none; margin-top: 25px; color: #fff; padding: 7px; font-size: 16px;}

    /* Team page */
    .team .mem-grid{margin: 70px 0px;}
    .team .mem-grid .employee-card{display: flex; flex-direction: column; height: 100%;}
    .team .mem-grid .employee-card .content{padding: 20px 20px 0px; letter-spacing: normal; flex: 1 1 auto;}
    .team .mem-grid .employee-card img{ border-radius: 45px;}
    .team .mem-grid .employee-card h2{font-size: 22px; font-weight: bold;  text-transform: uppercase; margin-bottom: 5px;}
    .team .mem-grid .employee-card h3{font-size: 16px; font-weight: bold; color: #4f4c4c;}
    .team .mem-grid .employee-card .btn-modal{ color: #4f4c4c; font-size: 14px; padding: 0; text-decoration: underline; text-transform: uppercase; border: none; background-color: transparent;}
    .team .mem-grid .employee-card .modal-dialog{max-width: 45%;}
    .team .mem-grid .employee-card .modal-content{border-radius: 0;}
    .team .mem-grid .employee-card .modal-header{padding-bottom: 0; border-bottom: none; }    
    .team .mem-grid .employee-card .modal-body{padding: 1rem 2rem; height: auto;}
    .team .mem-grid .employee-card .modal-body p{padding: 0px 0;}
    .team .mem-grid .employee-card .btn-close{background-size: 13px;}
    .team .mem-grid .employee-card .card-footer{padding: 0px 20px 35px; border: none;}
   
    /* Services Page  */
    .services .sec-content{ padding: 2rem 0 8rem;}
    .services .sec-content .sub-heading{text-transform: uppercase;}
    .services .sec-content p a{color: #6d6d6d;; text-decoration: underline;}
    .services .sec-content .services{align-items: center; padding-top: 3rem;}
    .services .sec-content img{width: 100%;padding-left: 1rem;}

    /* About Page  */
    .about .sec-content{ padding: 1rem 0 2rem;}
    .about .sec-content .sub-heading{text-transform: uppercase;}
    .about .sec-content p a{color: #6d6d6d;; text-decoration: underline;}
    .about .sec-content .about{align-items: center; padding-top: 2rem;}
    .about .sec-content img{width: 100%;padding-left: 1rem;}
    

    /* Blog page */
    .blog{border-top: 3px solid #ae0304;}
    .blog .page-wrapper{width: 80%; justify-self: right; padding: 2rem 0 6rem;}
    .blog .blog-nav .tag-list{display: flex; margin: 0;padding:0;}
    .blog .blog-nav .tag-list li{padding-right: 2.5rem;}
    .blog .blog-nav .tag-list li a{color: #4f4c4c; letter-spacing: 0;}
    .blog .blog-nav .tag-list li a:hover{color:#7fccf7}
    .blog .blog-nav .tag-list-mob{display: none;}
    .blog .blog-nav .btn-nav{display: flex; justify-content: flex-end;}
    .blog .blog-nav .btn-search{border: none; background: none; margin-right: 2.5rem;}
    .blog .blog-nav .btn-login{color: #7fccf7; border: 1px solid #7fccf7; padding: 5px 23px; background:none; font-size: 15px;}
    .blog .page-content{padding-top: 3rem;}
    .blog .blog-card{border: 1px solid #efefef; margin-bottom: 2rem;}
    .blog .blog-card img{width: 100%; height: 26rem;}
    .blog .card-content{display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 0 2rem 0 1rem;}
    .blog .card-content a{color: #4f4c4c; padding-top: 4.2rem;}
    .blog .card-content a:hover{color: #7fccf7;}
    .blog .card-footer{display: flex; justify-content: space-between;align-items: center; padding: 1.2rem 0; background: none;}
    .blog .card-footer span{font-size: 13px; color: #4f4c4c;}
    .blog .card-footer span i{font-size: 16px; color: red;}

    /* get involved page */
    .get-inv .row{ display: flex; text-align: center;}
    .get-inv .content{height: 75vh; padding: 7rem 0; background-size: cover; position: relative; z-index: 1;}
    .get-inv .content::before{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0.9; }
    .get-inv .content h1{ font-size: 50px; font-weight: bold; }
    .get-inv .content a{padding: 1.2rem 4.2rem; border-radius: 15px; margin-top: 3rem; display: inline-block; font-size: 24px;}

    .get-inv .content.light{width: 50%; background-image: url("./images/inv-bg.avif");  color: rgb(65,65,65)}
    .get-inv .content.light::before{content: ""; background-color: white; }
    .get-inv .light a{color: #414141; border: 2px solid #414141; }
    
    .get-inv .content.dark{width: 50%; background-image: url("./images/con-bg.avif");color: white}
    .get-inv .content.dark::before{content: ""; background-color: black;  }
    .get-inv .dark a{color: white; border: 2px solid white;}

    /* Investor page */
    .stakeholder{ border-top: 3px solid #ae0404;}
    .stakeholder img{width: 100%; height: 100%;}
    .stakeholder .content{padding:4rem; text-align: center;}
    .stakeholder .heading-blue{letter-spacing: 5px; padding: 1rem 0; font-size: 30px;}
    .stakeholder .line{width: 70px; border-bottom: 3px solid #c37300; display: flex; justify-self: center; padding-top: 1rem;}

    /* contractor */
    .contractor .sec-content{ padding: 2rem 0 8rem;}
    .contractor .sec-content .sub-heading{text-transform: uppercase;}
    .contractor .sec-content p a{color: #6d6d6d;; text-decoration: underline;}
    .contractor .sec-content .content{align-items: center; padding-top: 3rem;}
    .contractor .sec-content img{width: 100%;padding-left: 1rem;}
    .contractor .sec-content li{list-style-type: circle;padding: 1px 0px;}
    

    /* blog page */
    /* .blog-page .blog-sec{padding-top: 8rem;} */


    @media only screen and (max-width: 992px){
        .heading-main { font-size: 2.5rem;}
        .header .nav-desk{display: none;}
        .header .nav-btn{display: none;}
        .header .nav-mob{display: block; text-align: right;}
        .header .sm-menu{display: block;}    
        .header .sm-menu .sub-menu li {padding: 1rem 0 0 1rem;}
        .header .sm-menu ul.sub-menu{box-shadow: none;border: none;  margin: 0!important; padding: 0;} 
        .hero-sec .content{color: white; padding-left: 1rem;}
        .slider-sec { min-height: 60vh; margin-bottom: 40px; }
        .slider-sec .s-content{top: 20%; left: 5%; right: 5%;}
        .slider-sec .owl-carousel .owl-item img { height: 60vh; object-fit: cover; object-position: center; }
        .slider-sec .s-content h1{font-size: 3rem; line-height: 3.5rem; margin-bottom: 20px;}
        .slider-sec .s-content p{ font-size: 18px; letter-spacing: 0.5px; margin-bottom: 20px;}
        .slider-sec .s-content button,
        .slider-sec .s-content .banner-btn {padding: 12px 28px; font-size: 17px;}
        .slider-sec .owl-theme .owl-dots{ bottom: 30px; }
        .hero-sec{height: 25vh;}
        .team-sec{ padding: 40px 0;}
        .team-sec img{ padding-right: 0px;}
        .team-sec .col-lg-6:last-child{ padding-left: 15px;}
        .team-sec h3{ font-size: 13px; padding-left: 18px; margin-bottom: 10px;}
        .team-sec h3::before{ width: 8px;}
        .team-sec .sub-heading{ font-size: 1.8rem; margin-bottom: 18px;}
        .team-sec .text{ font-size: 16px; line-height: 1.6; text-align: left;}
        .team-sec .t-img{ margin-bottom: 30px;}
        .team-sec iframe{ height:150px; width: 150px;}
        .team-sec img{ padding: 0px;}
        .team-sec .t-btn{ display: flex; justify-content: center; margin-top: 20px;}
        .team-sec .t-btn a{ font-size: 15px; padding: 13px 35px;}
        .proj-sec .sec-header{height: 100%;}
        .proj-sec .heading{display: block; padding-bottom: 25px;}
        .proj-sec .heading .red-btn{display: none;}
        .proj-sec .bottom-btn {display: flex; justify-content: center;}
        .proj-sec .cards-sec{position:initial; height: 100%;}
        .proj-sec .cards-sec .overlay{display: none;}
        .proj-sec .cards-sec .proj-cards{grid-template-columns:auto; row-gap: 20px; background-color: white; padding-top: 0px; position: initial;}
        .proj-sec .cards-sec .proj-cards .item{margin-bottom: 20px; border-radius: 12px;}
        .proj-sec .cards-sec .proj-cards img{height: 350px!important; width: 100%; object-fit: cover; object-position: center;}
        .proj-sec .cards-sec .card-content{height: 350px;}
        .proj-sec .cards-sec .card-content h3{font-size: 15px; letter-spacing: 2px; padding: 18px; line-height: 1.4;}
        .proj-display{ padding: 50px 15px;}
        .proj-display h2{ font-size: 1.5rem; margin-bottom: 40px; letter-spacing: 0px;}
        .proj-display .item { margin: 15px 0; border-radius: 12px;}
        .proj-display .item img { height: 320px;}
        .proj-display h3{ font-size: 20px; bottom: 20px; padding: 15px 20px;}
        .proj-display .item:hover h3{ bottom: 25px;}
        .blog-sec{ padding: 60px 0px;}
        .blog-sec h2{ font-size: 2rem; margin-bottom: 40px;}
        .blog-sec .row{--bs-gutter-y:2rem;}
        .blog-sec .card img{ height: 240px;}
        .blog-sec .card .card-body{ padding: 25px 20px 15px;}
        .blog-sec .card .card-body h2{ font-size: 20px;}
        .blog-sec .card .card-btn{ padding: 0 20px 25px;}
        .contactus .contact-info{display: grid; grid-template-columns: auto ; padding: 65px 0px 45px;}
        .contactus .contact-info .content{margin-bottom: 35px;}
        .team .hero-sec .content {top: 19%;}
        .team .mem-grid .employee-card img{ width:100%; }
        .services .sec-content img{padding: 0;}
        .services .sec-content .services{flex-direction: column-reverse; padding: 0;}
        .about .sec-content img{padding: 0;}
        .about .sec-content .about{flex-direction: column; padding: 0;}
        .contractor .sec-content img{padding: 0;}
        .contractor .sec-content .content{ padding: 0;}
        .footer .logo{ display: block; padding-bottom: 1rem; text-align: center;}
        .footer .logo img{padding: 0;}
        .footer nav{display: block;}
        .footer nav ul{display: block; padding: 0; text-align: center;}
        .footer nav ul li{padding: 0;}
        .footer .copyright-bar{flex-direction: column; gap: 15px; text-align: center;}
        .footer .copyright-bar p{text-align: center;}
        .blog .page-wrapper{width: 100%;}
        .blog .blog-nav .btn-login{display: none;}
        .blog .blog-nav .tag-list{display: block;}
        .blog .blog-nav .tag-list li{display: inline; padding-right: 1.5rem;}
        .blog .blog-nav .btn-search{margin: 0;}
        .blog .card-content a { padding-top: 1rem;}
        .stakeholder .content{padding:4rem  10px;}
        .get-inv .content.light, .get-inv .content.dark{width: 100%;}
        .get-inv .content{height: 100%;}
        .team .mem-grid .employee-card .modal-dialog{max-width: 100%;}
        .team .mem-grid .employee-card h3 {font-size: 14px;}   
        .team .mem-grid .employee-card h2 {font-size: 18px;}
    }
    @media only screen and (max-width: 767px){
        .slider-sec { min-height: 55vh; margin-bottom: 30px; }
        .slider-sec .owl-carousel .owl-item img { height: 55vh; }
        .slider-sec .s-content{top: 18%; left: 5%; right: 5%;}
        .slider-sec .s-content h1{font-size: 2.2rem; line-height: 2.6rem; margin-bottom: 18px;}
        .slider-sec .s-content p{ font-size: 16px; margin-bottom: 18px;}
        .slider-sec .s-content button,
        .slider-sec .s-content .banner-btn {padding: 11px 24px; font-size: 15px;}
        .slider-sec .owl-theme .owl-dots{ bottom: 20px; }
        .slider-sec .s-content br { display: none; }
        .team-sec { padding: 35px 0;}
        .team-sec .t-img{ margin-bottom: 25px;}
        .team-sec h3{ font-size: 14px; padding-left: 16px;}
        .team-sec .sub-heading{ font-size: 1.8rem; margin-bottom: 12px;}
        .team-sec .text{ font-size: 16px; line-height: 1.6; margin-bottom: 12px;}
        .team-sec .t-btn a{ font-size: 14px; padding: 12px 30px;}
    }

    @media only screen and (min-width: 768px) and (max-width: 992px)  {
                .team .mem-grid .employee-card img{ width:100%; height: 100%;}
                .navbar{display: block;}
            }



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