/* General CSS */ 
           @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
 
           *,
           *::before,
           *::after {
               -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
               box-sizing: border-box;
               margin: 0;
               padding: 0;
               text-decoration: none;
               outline: none;
           }
           
           :root {
           
               /* Background Color */
               --bg-white:#fff;
           
               /* Text Colors */
               --primary-text: #333333;
               --secondary-color: #60cd12;
               --light-color: #e2f6de;
               --dark-color: #03262c;
               --text-white: #fff;
               --text-gray: #dee2e6;
               --anchor-color: #007aff;
           
               /* Font Family */
               --primary-font: 'Poppins', sans-serif; 
           }
 
           ::placeholder, :-ms-input-placeholder, ::-ms-input-placeholder {color: #000;}
           
           body,
           html {
               color: var(--primary-text);
               font-size: 10px;
               font-weight: 400;
               font-family: var(--primary-font);
               scroll-behavior: smooth;
               line-height: 1.5;
           }
           
           h1,
           h2,
           h3,
           h4,
           h5,
           h6,
           p {
               margin: 0;
           }
           
           h1 {
               font-size: 2rem;
               line-height: 1.4;
               font-weight: 600;
               color: var(--primary-text);
           }
           
           h2 {
               color: var(--primary-text);
               font-size: 4.7rem;
               font-weight: 600;
               display: inline-block;
               text-transform: capitalize;
               line-height: 1.2;
               margin-bottom: 2rem;
           }
           
           h3 {
               color: var(--text-white);
               font-size: 3.1rem;
               line-height: 1.2;
               font-weight: 700;
           }
           
           h4 {
               font-size: 2.5rem;
               font-weight: 700;
               line-height: 1;
               color: var(--primary-text);
           }
           
           h5 {
               font-size: 1.8rem;
               font-weight: 600;
               line-height: 1;
               color: var(--primary-text);
           }
           
           p {
               font-size: 1.8rem;
               line-height: 1.8;
               margin-top: 1rem;
               color: var(--primary-text);
               font-family: var(--secondary-font);
           }
           
           embed,
           iframe,
           img,
           object {
               max-width: 100%;
           }
           
           ul {
               margin: 0;
               padding: 0;
               list-style: none;
           }
           
           a,
           a:active,
           a:focus,
           a:hover,
           button {
               text-decoration: none;
               outline: 0;
           }
           
         
           
           a:hover,
           button:hover {
               -webkit-transition: all 0.3s ease-in;
               -o-transition: all 0.3s ease-in;
               -moz-transition: all 0.3s ease-in;
               transition: all 0.3s ease-in;
           }
           
           .pictures{
			font-size: 0px;
		}
		.pictures .item{
			position:relative;
			display:inline-block;
		}
		.pictures .item img{
			position:relative;
			z-index: 11;
		}
		.pictures .item .item_description{
			position:absolute;
			z-index: 10;
			left: -15px;
			top: -15px;
			right: -15px;
			bottom: -60px;
			
			-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
			-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
			box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
			
			background:#151515;
			padding: 15px;
		
			display:none;
		}
		.pictures .item .item_description span{
			color:#ffffff;
			font-size: 13px;
			display:block;
			position:absolute;
			bottom: 15px;
			height: 30px;			
		}
		.pictures .item:hover{
			z-index: 100;
		}
		.pictures .tjGalleryItem .item:hover .item_description{
			display:block;
		}

        /* common */
        .mt-30{margin-top: 30px;}
        .mobile-view{display: none;}
        .right-wrapper{display: block;}
        footer{display: none;}
        .back-to-works{position: absolute; text-decoration: none; right: 0; top: 30px; font-size: 16px;}
        .back-to-works:hover{text-decoration: underline;}
        .arrow {
            border: solid #2a75ff;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 4px;
        }
          .left {
            transform: rotate(135deg);
            -webkit-transform: rotate(135deg);
          }

        .main-wrapper .right-wrapper.about h1 {
            font-size: 3em;
            position: relative;
            top: 0;
            border: none;
        }
        
        .project-details h1{position: relative !important; top: 0 !important;}
        .main-wrapper .right-wrapper.about img{width: 100%;}
        .main-wrapper .right-wrapper.about hr{margin-bottom: 3em;}
        
        .logo{position: fixed; font-size: 4rem; color: #333; top: 3rem; text-decoration: none; z-index: 3;}
        .main-wrapper{display: flex; padding: 2rem 0; position: relative;}
        .main-wrapper .navbar{display: flex; align-items: flex-start; position: fixed; width: 15rem; z-index: 2;    margin-top: 10rem;}
        .main-wrapper .navbar .navbar-nav{flex-direction: column;}
        .main-wrapper .navbar .navbar-nav .nav-item{margin-bottom: 2rem;}
        .main-wrapper .navbar .navbar-nav .nav-item h1{font-size: 1rem;}
        .main-wrapper .navbar .navbar-nav .nav-item p{font-size: 1rem; line-height: 20px;}
        .main-wrapper .navbar-brand{position:absolute; top: 0rem; left: 2rem; font-size: 4rem;    text-decoration: none;  color: #333}
        .main-wrapper .left-wrapper .navbar{background-color: #fff !important;}
        .main-wrapper .navbar > .container-fluid{padding-left: 0;}
        .main-wrapper .left-wrapper .navbar .navbar-nav{flex-direction: column; padding-top: 7rem !important;}
        .main-wrapper .left-wrapper .navbar .navbar-collapse{padding-left: 1rem;}
        .main-wrapper .left-wrapper{width: 200px; height: 100%; padding: 5rem 2rem 0 2rem; position: fixed; overflow: auto;   z-index: 1;}
        .main-wrapper .right-wrapper{position: relative;     margin-top: 110px; height: 100%; padding-top: 10px;  width: calc(100% - 150px); margin-left: 150px;}
        .main-wrapper .right-wrapper.contact{padding-top: 15rem;  margin-top: 40px;}
        .main-wrapper .left-wrapper ul{padding: 0 !important;}
        .main-wrapper .left-wrapper ul li{line-height: 5rem;}
        .main-wrapper .left-wrapper ul li a{font-size: 2rem; color: var(--primary-text); text-decoration: none;}
        .main-wrapper .left-wrapper ul li a.active{text-decoration: underline;}
        .main-wrapper .left-wrapper ul li h1{font-weight: normal !important; color: var(--primary-text); margin-top: 2rem;}
        .main-wrapper .right-wrapper .pictures .tjGalleryItem img{position: relative;}
        .main-wrapper .right-wrapper .pictures .project-title-new{}
        .main-wrapper .right-wrapper h1 {
            border-bottom: 1px solid #d9d9d9;
            padding-bottom: 15px;
            position: absolute;
            top: 70px;
            width: 100%;
            z-index: -1;
        }

        
        .main-wrapper .right-wrapper .back-to-projects{ text-decoration: none; display: block; transition: all 0.3s ease-in; margin-top: 2rem; color: #4e4e4e; font-size: 2rem;  width: 100%;  text-align: right; }
        .main-wrapper .right-wrapper .back-to-projects:hover:before{margin-right:15px}
        .main-wrapper .right-wrapper .back-to-projects::before {    transition: all 0.5s; background-image: url(../pages/images/next.png); content: ''; width: 50px; height: 20px; display: inline-block; background-size: 20px 20px; background-repeat: no-repeat; transform: rotate(180deg);  margin-right: 10px;  }
        .main-wrapper .right-wrapper .back-to-projects:hover{text-decoration: underline;}
        .main-wrapper .navbar-expand-lg .navbar-nav .nav-link{font-size: 2rem; padding-left: 0; color: #333;}
        .main-wrapper .navbar-expand-lg .navbar-nav .nav-link.active{    position: relative;}
        .main-wrapper .navbar-expand-lg .navbar-nav .nav-link.active:after {
            content: '';
            width: 50px;
            height: 3px;
            background: #5c5c5c;
            position: absolute;
            top: 32px;
            left: 20px;
        }
        .main-wrapper .right-wrapper .pictures a {position: relative;}
        .main-wrapper .right-wrapper .pictures a .project-title{display: none;}
        .main-wrapper .right-wrapper .pictures a .project-title:hover{display: block;}
        .main-wrapper .right-wrapper .form-control{font-size: 1.5rem; padding-left: 0; color: #000; border: none; border-bottom: 1px solid #c5c5c5; border-radius: 0;}
        .main-wrapper .right-wrapper .form-label{font-size: 2rem;}
        .main-wrapper .right-wrapper .section-heading{font-size: 3rem; color: #151515; margin-top: 2rem; }
        .main-wrapper .right-wrapper.about .right-sidebar img,
        .main-wrapper .right-wrapper.contact .right-sidebar img{width: 100%; margin-bottom: 1rem; }
        .main-wrapper .right-wrapper .pictures .tjGalleryItem img:hover { transition: 0.8s; opacity: 0.5; cursor: pointer;    }
        
        /* new right wrapper */

        .main-wrapper .right-wrapper .row{ --bs-gutter-x: 30px !important;   margin-bottom: 30px;}
        
        .main-wrapper .right-wrapper .row-1 {flex-direction: row; column-gap: 3rem; display: flex; margin-bottom: 3rem; } 
        .main-wrapper .right-wrapper .row-2{flex-direction: row; column-gap: 30px; display: flex; margin-bottom: 30px;}
        .main-wrapper .right-wrapper .row-2 div{flex-direction: column; display:flex; column-gap: 30px; row-gap: 30px;}
        
        .main-wrapper .right-wrapper .row-3{flex-direction: row; column-gap: 30px; display: flex; }
        .main-wrapper .right-wrapper .row-3 div:last-child{display: flex; flex-direction: column;} 
        .main-wrapper .right-wrapper .row-3 div:last-child div:last-child{display: flex; flex-direction: row; column-gap: 30px; }
        .main-wrapper .right-wrapper .row-3 div:last-child div:first-child{margin-bottom: 30px;}


        .main-wrapper .right-wrapper .row-4{display: flex; flex-direction: row; column-gap: 30px; row-gap: 30px;}  
        .main-wrapper .right-wrapper .row-4 div:first-child{display: flex; flex-direction: column; column-gap: 30px; row-gap: 30px;}
        .main-wrapper .right-wrapper .row-4 div:first-child div:first-child{display: flex; flex-direction: row; }
        .main-wrapper .right-wrapper .row-3 div:last-child div:last-child div:last-child {  margin-bottom: 30px;}

        .main-wrapper .right-wrapper .row-5{display: flex; flex-direction: row; column-gap: 30px; row-gap: 30px;}  
        .main-wrapper .right-wrapper .row-5 div:first-child div:last-child {display: flex; column-gap: 30px; row-gap: 30px;    }
        
        .main-wrapper .right-wrapper .row-6{    display: flex; column-gap: 30px;}
        
        .main-wrapper .navbar-expand-lg .navbar-nav .nav-link:hover {  padding-left: 1.5rem; }
        .btn{font-size: 2rem !important; border:none !important; border-radius: 0 !important; background-color: #fff !important; color: var(--primary-text) !important;}
        .cards-wrapper{display: grid;
            column-gap: 20px;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            row-gap: 20px;}
        .cards-wrapper .card{cursor: pointer; transition: 0.3s; padding-bottom: 10px;}
        .cards-wrapper .card .card-body .card-title img{width: 20px;  transition: all 0.5s ease;}
        .cards-wrapper .card:hover .card-body .card-title img{margin-left: 20px;}
        .cards-wrapper .card:hover{    transform: scale(1.05);}
        .cards-wrapper .card h5{font-size: 18px;}
        .cards-wrapper .card .learn-more{    background: #2f89d7; padding: 10px; border-radius: 3px;color: #fff; text-decoration: none; font-size: 16px;}
        .card-img, .card-img-bottom, .card-img-top{height: 150px;} 
          
        .thankyou {
            text-align: center;
            margin-top: 8rem;
        }
        .thankyou .col{    border: 1px solid; padding: 0;}
        .thankyou h1 {
            font-size: 5rem;
            background: #343434;
            padding: 4rem 0rem;
            color: #fff;
        }
        
        .thankyou p {
            font-size: 2rem;
        }

        footer{background-color: #151515; height: 5rem; width: 100%; color: #fff;text-align: center; font-size: 2rem;}
            
           
         /*  Responsive CSS  */
           
     /* Small devices (landscape phones, 576px and up) */

    

     @media (max-width: 480px) { 
        .container{max-width: 100% !important; padding-top: 0 !important;}
        .main-wrapper .navbar{height: 70px; background-color: #fff; opacity: 0.9;}
        .main-wrapper .right-wrapper h1{font-size: 30px; padding-bottom: 8px;}
        .logo{top: 0;}
        .navbar-toggler{margin-top: 12px;}
        .mobile-view{display: none;margin-top: 74px;}
      /*   .right-wrapper{display: none;} */
        .mobile-view img{width: 100%; margin-bottom: 30px;}

       
          
    }

        @media (max-width: 576px) { 
            .container{max-width: 100% !important; padding-top: 0 !important;}
            .main-wrapper .right-wrapper h1{font-size: 30px; padding-bottom: 8px;}
            .logo{top: 0;}
            .navbar-toggler{margin-top: 12px;} 
            .mobile-view{display: none;margin-top: 74px;}
       /*  .right-wrapper{display: none;} */
        .mobile-view img{width: 100%; margin-bottom: 30px;}
        .back-to-works{top:20px;}
        .main-wrapper .right-wrapper .row-1,
        .main-wrapper .right-wrapper .row-2,
        .main-wrapper .right-wrapper .row-2 div,
        .main-wrapper .right-wrapper .row-3,
        .main-wrapper .right-wrapper .row-4,
        .main-wrapper .right-wrapper .row-4 div:first-child,
        .main-wrapper .right-wrapper .row-3 div:last-child div:last-child div:last-child,
        .main-wrapper .right-wrapper .row-4 div:first-child div:first-child,
        .main-wrapper .right-wrapper .row-5,
        .main-wrapper .right-wrapper .row-5 div:first-child div:last-child ,
        .main-wrapper .right-wrapper .row-6 {column-gap: 10px;  row-gap: 10px; } 

        .main-wrapper .right-wrapper .row-2,
        .main-wrapper .right-wrapper .row-3 div:last-child div:first-child ,
        .main-wrapper .right-wrapper .row-1,
        .main-wrapper .right-wrapper .row-4,
        .main-wrapper .right-wrapper .row-3 div:last-child div:last-child div:last-child{margin-bottom: 10px;}
        .mt-30{margin-top: 10px;}

        .main-wrapper .right-wrapper .row-3 div:last-child div:last-child{column-gap: 10px;}
        .main-wrapper .right-wrapper .row{    --bs-gutter-x: 10px !important; margin-bottom: 10px;} 
        }
        
        /* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
        @media (max-width: 768px) {  
            .container{max-width: 100% !important; padding-top: 0 !important;}
            .mobile-view{display: none;margin-top: 74px;}
       /*  .right-wrapper{display: none;} */
        .mobile-view img{width: 100%; margin-bottom: 30px;}
       
        }
        
        /* Large devices (desktops, 992px and up) */
        @media (max-width: 991px) { 
            .container{max-width: 100% !important; padding-top: 0 !important;}
            .logo{top: 1rem;} 
            .main-wrapper .right-wrapper{width: 100% !important; margin-left: 0;} 
            .navbar-toggler:focus{box-shadow: none !important;}
            .navbar-toggler{border:none !important; font-size: 2rem !important; color: #333 !important;}
            .bi-list{transition: 0.3s; font-size: 4rem;}
            .bi-list:hover::before{content: '\F659';}
            .navbar-toggler.collapse{background-color: red !important;}
            .main-wrapper .navbar{margin-top: 0; width: 100%; z-index: 2;}
            .main-wrapper .navbar .container-fluid{justify-content: flex-end;}
            .main-wrapper .navbar .navbar-collapse{background-color: #fff;     margin-top: 3rem;}
            .main-wrapper .navbar .navbar-nav{margin-right: 1rem;}
            .main-wrapper .navbar .navbar-nav .nav-item{border-bottom: 1px solid #c5c5c5; margin-bottom: 0;}
            .main-wrapper .navbar .navbar-nav .nav-item .active,
            .main-wrapper .navbar .navbar-nav .nav-item .active:hover{text-decoration: none; background-color: #333; color: #fff; padding-left: 1rem;}
            .main-wrapper .navbar .navbar-nav .nav-item a:hover{background-color: #000; transition: 0.3s;}
            .main-wrapper .navbar .navbar-nav .nav-item a{padding-left: 1rem; background-color: #333; color: #fff; line-height: 3.5rem;}
            
        }
        @media (min-width: 320px) and (max-width:479px) {  
            .cards-wrapper {grid-template-columns: 1fr;}
        }

        @media (min-width: 480px) and (max-width:767px) {  
            .cards-wrapper {grid-template-columns: 1fr 1fr;}
        }

        @media (min-width: 768px) and (max-width:1199px) {  
            .cards-wrapper {grid-template-columns: 1fr 1fr 1fr;}
        }
        /* Extra large devices (large desktops, 1200px and up) */
        @media (min-width: 1200px) and (max-width:1599px) {  
            .container{  padding-top: 0 !important;}
            .main-wrapper .navbar{background-color: #fff; z-index: 1;}
            .logo{top:-1rem;}
           
        }
        
        /* Extra extra large devices (extra large desktops, 1400px and up) */
        @media (min-width: 1600px) {  
            .cards-wrapper {grid-template-columns: 1fr 1fr 1fr 1fr;}
        }
        
        /*