@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
            
            
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
            /*358a8b*/
            
            /*main color - #FFC93C*/
            /*#07689F*/
            /*#40A8C4*/
            /*#A2D5F2*/
            
            
            
            :root {
                --primary-color: #A2D5F2;
                --secondary-color: #07689F;
                --dark-color: #40A8C4;
                --bg-dark-gray: #355C7D;
                --bg-black: #1d1b1b;
                --dark-light-color: #777a7f;
                --primary-text: #fff;
                --text-white: #fff;
                --text-gray: #fff;
            }
            
            body {
                font-family: 'Poppins', sans-serif;
               background: #000000;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #07689F, #ffffff);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #07689F, #ffffff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

                /*background-color: var(--bg-black);*/
                /*background: url(../images/22_dhans11.jpg) ;    */
                /*background-size: 100%;*/
            }
            input[type=number]::-webkit-inner-spin-button {
                -webkit-appearance: none;
            }
            
            ::-webkit-scrollbar {
                width: 0.25rem;
            }
            
            ::-webkit-scrollbar-track {
                background: var(--bg-dark-gray);
            }
            
            ::-webkit-scrollbar-thumb {
                background: var(--primary-color);
            }
            
            .main-btn{
                color:var(--text-white);
                font-size:1rem;
                text-transform: uppercase;
                font-weight: 600;
                background-color:var(--primary-color);
                padding:.875rem 3.125rem;
                border-radius: .625rem;
                -webkit-transition:all .3s ease;
                -moz-transition:all .3s ease;
                -ms-transition:all .3s ease;
                -o-transition:all .3s ease;
                transition:all .3s ease;
            }
            .main-btn:hover{
                background-color:var(--secondary-color);
                color:var(--text-white);
            }
            h1{
                font-size:6.25rem;
                font-weight: 700;
                line-height: 1;
                margin-bottom:1.6875rem;
                color:var(--text-white);
            }
            h2{
                font-size:2.9375rem;
                font-weight: 700;
                line-height: 1.3; 
                color:var(--text-white);
            }
            h3{
                font-size:1.875rem;
                font-weight: 700;
                line-height: 1; 
                color:var(--primary-text);
            } 
            h5{
                font-size:1.375rem; 
                line-height: 1.5; 
                color:var(--text-gray);
            } 
            h6{
                font-size:.875rem; 
                line-height: 1.5; 
                color:var(--text-white);
                font-weight: 400;
                opacity: .85;
            } 
            
            p{
                color:var(--text-gray);
                font-size: 1.125rem;
                line-height: 1.6;
                font-weight: 400;
                margin:1.875rem 0;
            }
            span{
                color:var(--text-white);
                font-size: 1rem;
                font-weight: 600;
            }
            a{
                font-size: 1.25rem;
                font-weight: 600;
                line-height: 1.3;
                color:var(--text-white);
                text-decoration: none;
                cursor:pointer;
            }
            a:hover{
                color:var(--primary-text);
            }
            .icon_design{
                width:5.625rem;
                height:5.625rem;
                background-color:var(--secondary-color);
                border-radius: 100%;
                display:flex;
                align-items: center;
                justify-content: center;
            }
            .header_wrapper .navbar{
                padding:0;
                -webkit-transition:all .2s linear;
                -moz-transition:all .2s linear;
                -ms-transition:all .2s linear;
                -o-transition:all .2s linear;
                transition:all .2s linear;
            }
            .header_wrapper .navbar-brand img{
                width: 90px;
                /* margin-left: -33px; */
            } 
            .header-scrolled{
                position:fixed;
                top:0;
                left:0;
                width:100%;
                background-color:rgba(0, 0, 0	,.5);
                -webkit-box-shadow: 0 0.25rem 0.375rem 0 rgba(12,0,46,.05);
                box-shadow: 0 0.25rem 0.375rem 0 rgba(12,0,46,.05);
            }
            .banner_wrapper .background_shape{
                position:absolute;
                top:0;
                height:calc(100vh - 4.0625rem);
                left:0;
                right:0;
                /* background-image:url('../images/v748-toon-131.jpg'); */
                background-position: center center;
                background-size: cover;
                /* clip-path:polygon(100% 0%, 0% 0%, 0% 100%, 100% 62%); */
                z-index:-1;
            }
            .banner_wrapper .main-content{
                position:relative;
                z-index:1;
                width:100%;
                padding-top:6.25rem;
            }
            .banner_wrapper .social-icon a img{
                width:3.125rem;
                height:3.125rem;
                transition:0.3s ease-in;
                margin: 0px 4px;
            }
            .banner_wrapper .social-icon a:hover img{
                transform:translateY(-6px);
                box-shadow: 0px 5px   var(--primary-color);
            }
            .main_menu_wrapper .accordion-item{
                background-color:transparent;
                margin:0 0 1.5625rem;
                border: none;
            }
            .main_menu_wrapper .accordion-header .accordion-button{
                margin:0 .3125rem;
                height: 100px;
                background-color:var(--dark-color);
                box-shadow: 1.125rem 1.125rem 3rem rgb(108 99 255 / 10%);
                border-radius: .9375rem !important;
                line-height: 8.875rem;
                padding:0;
                padding-right:3.125rem;
                -webkit-transition:all .3s ease;
                -moz-transition:all .3s ease;
                -ms-transition:all .3s ease;
                -o-transition:all .3s ease;
                transition:all .3s ease;
                border: none;
            }
            .main_menu_wrapper .accordion-header .icon-box{
                width:8.875rem;
                height:100%;
                border-radius: .9375rem 0 0 .9375rem;
                background-color:var(--secondary-color);
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .main_menu_wrapper .accordion-header .accordion-button:after{
                position:absolute;
                right:0;
                width:8.875rem;
                height:100%;
                border-radius: 0 .9375rem .9375rem 0;
                background-image:url('../images/up-arrow.svg');
                background-color:var(--secondary-color);
                background-size: 2.7rem;
                background-position: center center;
                -webkit-transition:all .3s ease;
                -moz-transition:all .3s ease;
                -ms-transition:all .3s ease;
                -o-transition:all .3s ease;
                transition:all .3s ease;
            }
            .main_menu_wrapper .accordion-header .accordion-button:not(.collapsed)::after{
                border-radius: .9375rem 0 0 .9375rem;
                background-image:url("../images/down-arrow.svg");
            }
            .main_menu_wrapper .accordion-header:hover button,
            .main_menu_wrapper .accordion-header .accordion-button:not(.collapsed){
                background-color:var(--primary-color);
                height: 120px;
            }
            .main_menu_wrapper .accordion-header:hover .icon-box{
                background-color: var(--primary-color);
                transition: 0.4s;
                padding-left: 70px;
            }
            .main_menu_wrapper .accordion-body{
                background-color:var(--dark-color);
                margin-top:1.5625rem;
                padding:4.375rem;
                border-radius: .9375rem;
            }
            .about_wrapper .accordion-body .card_img{
                width:60%;
                border:0;
                border-radius: .9375rem;
            }
            .about_wrapper .accordion-body .card_img img{ 
                border-radius: .9375rem;
            }
            .about_wrapper .accordion-body .card_img:hover{ 
                transform: scale(1.1);
                -webkit-transition:all 0.3s ease;
                -moz-transition:all 0.3s ease;
                -ms-transition:all 0.3s ease;
                -o-transition:all 0.3s ease;
                transition:all 0.3s ease;
            }
            .about_wrapper .card_detail{
                position:absolute;
                top:3.75rem;
                right:1.25rem;
                z-index:1;
                width:50%;
                background-color:var(--secondary-color);
                padding:1.5625rem 1.8rem;
                border-radius: .9375rem;
                animation: card_animation 3s linear ;
            }
            @keyframes card_animation{
                0%{
                    transform: translateY(-10x);
                }
                50%{
                    transform: translateY(+10x);

                }
            }
            .about_wrapper .card_detail ul li{
                border-bottom:.0625rem dashed rgba(255,255,255,.3);
                padding:.625rem 0;
            } 
            .resume_wrapper .title h2{
                padding-left:2.5rem;
                font-size:2.1875rem;
            }
            .resume_wrapper .shape{
                position:absolute;
                left:0;
                top:50%;
                transform:translateY(-50%);
                width:1.5rem;
                height:1.5rem;
                border-radius: 100%;
                border:.1875rem solid var(--primary-color);
            } 
            .resume_wrapper .shape:before{
                position:absolute;
                content:'';
                width:.5rem;
                height:.5rem;
                border-radius: 100%;
                background-color:var(--primary-color);
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
            }
            .resume_wrapper .year span{
                font-size: 0.5rem;
                color:var(--primary-color);
                border:.0625rem solid var(--primary-color);
                border-radius: 3.125rem;
                padding:7px 23px;
            }
            
            .resume_wrapper .progress{
                height:.4375rem;
                border-radius: 3.125rem;
                background-color:var(--dark-light-color);
                opacity:0.80;
                margin-top:1.5625rem;
            }
            
            .resume_wrapper .progress-bar{
                background-color: var(--primary-color);
                position:absolute;
                height:.3125rem;
                top:3.125rem;
                border-radius: 3.125rem;
            }
            .resume_wrapper .progress span{
                position:absolute;
                right:0;
                top:1.25rem;
                color:var(--primary-color);
            }
            .portfolio_wrapper .nav-link{
                color:var(--text-white);
                font-weight: 600;
                font-size:1.125rem;
                letter-spacing:.0625rem;
                text-align: center;
            }
            .portfolio_wrapper .nav-link.active,
            .portfolio_wrapper .show>.nav-link{
                background-color:transparent;
                color:var(--primary-color);
            }
            .portfolio_wrapper .portfolio-img{
                width:100%;
                min-height: 23.75rem;
                height:100%;
                position:relative;
                border-radius: .9375rem;
                cursor:pointer;
            } 
            .portfolio_wrapper .portfolio-img>img{
                border-radius: .9375rem;
                object-fit: cover;
                object-position:center;
            }
            .portfolio_wrapper .portfolio-img .hidden-text{
                position:absolute;
                top:0;
                bottom:0;
                left:0;
                right:0;
                height:0;
                z-index:1;
                background-color:rgba(0,0,0,0.5);
                border-radius: .625rem;
                display:flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                -webkit-transition:all 0.3s linear;
                -moz-transition:all 0.3s linear;
                -ms-transition:all 0.3s linear;
                -o-transition:all 0.3s linear;
                transition:all 0.3s linear;
                overflow:hidden;
                
            }
            .portfolio_wrapper .portfolio-img:hover .hidden-text{
                height:100%;
            }
            
            .services_wrapper .card{
                height: 470px;
                border-radius: .9375rem;
                background-color:var(--bg-dark-gray);
                padding:3.75rem 2.5rem 3.625rem;
                text-align: center;
                align-items: center;
                cursor:pointer;
                -webkit-transition:all 0.3s ease;
                -ms-transition:all 0.3s ease;
                -moz-transition:all 0.3s ease;
                -o-transition:all 0.3s ease;
                transition:all 0.3s ease;
            }
            .services_wrapper .card:hover{
                background-color:var(--primary-color);
                color:var(--secondary-color)!important;
            }
            .services_wrapper .card:hover h3,p{
                color:var(--secondary-color)!important;
            }
             
            .testimonial_wrapper .carousel-indicators{
                bottom:-2.8125rem;
            }
            .testimonial_wrapper .carousel-indicators[data-bs-target]{
                background-color:var(--secondary-color);
            }
            .testimonial_wrapper .card{
                padding:3.125rem 3.125rem 3.125rem 0;
                background-color:var(--bg-dark-gray);
                border-radius: 0 .5rem .5rem 0;
            }
            .testimonial_wrapper .profile-box{
                padding:1.875rem;
                background-color:var(--primary-color);
                border-radius: .5rem 0 0 .5rem;
            }
            .testimonial_wrapper .profile-box img{
                border-radius: .625rem 3.125rem;
            }
            .testimonial_wrapper .desc-box{
                padding-left:2.5rem;
            } 
            .blog_wrapper .card{
                background-color:var(--bg-dark-gray);
                border-radius: .9375rem;
                overflow:hidden;
            }
            .blog_wrapper .card img{
                border-radius: .9375rem .9375rem 0 0;
                -webkit-transition:all 0.3s ease;
                -moz-transition:all 0.3s ease;
                -ms-transition:all 0.3s ease;
                -o-transition:all 0.3s ease;
                transition:all 0.3s ease;
                cursor:pointer;
            } 
            .blog_wrapper .card img:hover{
                transform:scale(1.1);
            }
            .blog_wrapper .card h5{
                font-weight: 700;
                color:var(--primary-text);
            }
            
            .contact_wrapper form .form-control:focus{
                box-shadow:none;
            }
            .contact_wrapper form .form-control{
                width:100%;
                height:3.75rem; 
                border-radius: .625rem !important;
                background-color:transparent;
                color:var(--text-gray);
                border:.0625rem solid rgb(255 255 255 / 15%) !important;
            }
            .contact_wrapper form input::placeholder,
            .contact_wrapper form .textarea::placeholder{
                color:var(--text-gray);
            }
            .contact_wrapper form .textarea.form-control{
                height:14.375rem;
            }
            .contact_wrapper form .form-control:hover{
                background-color: var(--secondary-color);
                border:0rem solid rgb(255 255 255 / 15%) !important;
                box-shadow: 5px 3px 5px var(--secondary-color);
                transition: 0.3s all;
            }
            .cursor{
                width:1.875rem;
                height:1.875rem;
                border-radius:100%;
                border:.0625rem solid var(--primary-color);
                transition:all 200ms ease-out;
                position:fixed;
                pointer-events: none;
                left:0;
                top:0;
                transform:translate(calc(-50% + 0.9rem), -50%);
                z-index:9;
            }
            .cursor2{
                width:.5rem;
                height:.5rem;
                border-radius:100%; 
                background-color:var(--primary-color); 
                position:fixed;
                pointer-events: none;
                left:0;
                top:0; 
                transform:translate(-50%,-50%);
                transition:width .3s, height .3s, opacity .3s;
                z-index:9;
            }