@charset "utf-8";

*{
            margin: 0;
            padding: 0;
            outline: none;
            border: none;
            text-decoration: none;
            box-sizing: border-box;
            scroll-behavior: smooth;
            font-family: 'Montserrat', sans-serif;
        }
       
        #banner{
            background: url("IMAGES/front2.JPG");
			background-position: center;
			background-size: cover;
            height: 100vh;
            width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
        }
        .banner-text{
			text-align: center;
			color: #fff;
			padding-top: px;
			
		}
		.banner-text h1{
			font-size: 100px;
		}
		.banner-text h4{
			font-size: 25px;
			font-weight: 500;
			width: 59rem;
			margin: auto;
			color: #FFF;
			
			
		}
        .typing{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        .typing h3{
            margin: 0 0.7rem 0rem 0;
			font-size: 35px;
        }
		.banner-text p{
            width: 45ch;
            margin-top: 5px;
			font-size: 30px;
			font-weight: bold;
			font-style: italic;
            animation: typing 6s steps(45) forwords,blink .5s steps-end infinite alternate;
            white-space: nowrap;
            overflow: hidden;
            border-right: 3px solid;
            animation: typing 6s ease-out infinite;
		}
        @keyframes typing{
            0%, 100%{
                width: 0;
            }
            50%{
                width: 42ch;
            }
        }
        @keyframes blink{
            50%{
                border-color: transparent;
            }
        }
        
		.banner-btn{
			margin: 30px auto 0;
		}
        .banner-btn a{
			width: 100px;
			height: 40px;
			border-top-left-radius: 10px;
			border-bottom-right-radius: 10px;
			text-decoration: none;
			display: inline-block;
			margin: 5px 10px;
			padding: 10px 0;
			color: #D59F00;
			font-weight: bold;
			border: 2px solid #f1f1f1 ;
			position: relative;
			z-index: 1;
			transition: color 0.5s;
		}
		.banner-btn a span{
			width: 0;
			height: 100%;
			border-top-left-radius: 10px;
			border-bottom-right-radius: 10px;
			position: absolute;
			top: 0;
			left: 0;
			background: #fff;
			z-index: -1;
			transition: 0.5s;
		}
		.banner-btn a:hover span{
			width: 100%
		}
		.banner-btn a:hover {
			color: #D59F00;
		}
        .social-media{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        .social-media a{
            display: inline-flex;
            justify-content: center;
            text-decoration: none;
            align-items: center;
            width: 2.5rem;
            height: 2.5rem;
            font-size: 1.5rem;
            color: #D59F00;
            margin: 1rem 1rem 1rem 0;
            transition: .5s ease;
        }
        .social-media a:hover{
            color: #fff;
        }
		
		.banner-iconTop a{
			display: inline-flex;
			justify-content: center;
			align-items: center;
			padding: .5rem;
			background: #D59F00;
			border-radius: .9rem;
			margin-top: 9rem;
			margin-bottom: 2rem;
			font-size: .5rem;
			color: #fff;
			transition: .5s ease;
		}
		.banner-iconTop a:hover{
			box-shadow: 0 0 1rem #00CFE0 ;
			transform: rotate(180deg)
		}
		.banner-iconTop a i{
			font-size: 2rem;
			color: #fff;
		}
		@media screen and (max-width: 770px){
			.banner-text h1{
			   font-size: 44px;
			}
			.banner-btn a{
				display: block;
				margin: 20px auto;
			}
            .typing{
                margin: auto;
				display: block;
            }
			.typing p{
				margin: auto;
			}
			#menubtn{
				width: 30px;
				height: 30px;
			}
			#menubtn img{
				width: 20px;
				margin-top: 6px;
			}
			.banner-iconTop a{
				margin-top: 8rem;
			}
			.banner-text p{
				font-size: 18px;
				margin-top: 4px;
			}
			.banner-text h3{
				font-size: 18px;
			}
			.banner-text h4{
				width: 80%;
			}
		}
        nav{
            position: fixed;
            top: 0px;
            bottom: 0;
            left: 0;
            height: 100%;
            width: 90px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            overflow: hidden;
            transition: width 0.2s linear;
            background-color: #E4E4E4;
            box-shadow: 0 20px 35px rgba(0, 0, 0, 0.102);
			z-index: 100;
        }
        .logo{
            text-align: center;
            display: flex;
            transition: all 0.5s ease;
            margin: 10px 0 0 10px;
        }
        .logo img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        .logo span {
            font-weight: bolder;
            padding-left: 10px;
            top: 10px;
            font-size: 18px;
            text-transform: uppercase;
        }
         a {
            position: relative;
            color: rgb(85, 83, 83);
            font-size: 15px;
            display: table;
            width: 300px;
            padding: 20px;
        }
        li a .icon {
            position: relative;
            width: 60px;
            height: 20px;
            top: 14px;
            font-size: 2px;
            text-align: center;
			color: #241100;
        }
        .nave-item {
            position: relative;
            top: 8px;
            margin-left: 20px;
        }
        nav:hover {
            width: 280px;
            transition: all 0.5s ease;
        }
        .logout{
            position: absolute;
            bottom: 0;
        }
		@media screen and (max-width: 770px){
			nav {
				width: 0px;
			}
			a {
			    padding-left: px;
			}
			nav:hover {
				width: px;
			}
		}

        /* about */

        #about{
			width: 100%;
			padding: 30px 0;
			
			background: #0D0D0D;
		}
		.about-title-text{
			text-align: center;
			padding-bottom: 70px;
            position: relative;
		}
		.about-title-text p{
			margin: auto;
			font-size: 30px;
			color:  #D59F00;
			/* font-weight: bold; */
			position: relative;
			z-index: 2;
			
			
		}
		
		.about-title-text h1{
			font-size: 60px;
            font-weight: 900;
            color: #444444;
            z-index: 1;
		}
		.about-title-text h1 span{
			color: #D59F00;

		}
		.about-box{
			margin: auto;
			width: 80%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			text-align: center; 
		}
		.abouts{
			flex-basis: 50%;
		}
		.about-img{
			flex-basis: 50%;
			margin: auto;
		}
		.about-img img{
			width:80%;
			border-radius: 10px;
		}
		.abouts h1{
			text-align: left;
			font-weight: bold;
			color: #fff;
			font-size: 40px;
		}
        .line{
            width: 7rem;
            height: 4px;
            background-color:  #D59F00;
            margin-bottom: px;
        }
		.abouts p{
			text-align: justify;
            margin-top: 30px;
		}
		.about-desc{
			display: flex;
			align-items: center;
			margin-bottom: 40px;
		
		}
		.about-icon{
			width: 50px;
			height: 32px;
			font-size: 30px;
			line-height: 40px;
			border-radius: 8px;
			color: #D59F00;
			border: 1px solid #D59F00;
		}
		.about-icon img{
			width: 30px;
			height: 30px;
		}
		.about-text p{
			padding: 0 0px;
			text-align: initial;
            color: #fff;
			line-height: 1.5;
		}
        .abouts a{
            float: left;
        }
		
		.about-btn{
			margin: 30px auto 0;
		}
		.about-btn a{
			width: 100px;
			height: 40px;
			border-top-left-radius: 10px;
			border-bottom-right-radius: 10px;
			text-decoration: none;
			display: inline-block;
			margin: 5px 10px;
			padding: 10px 0;
			color: #fff;
			font-weight: bold;
			border: 2px solid #D59F00; ;
			position: relative;
			z-index: 1;
			transition: color 0.5s;
		}
		.about-btn a span{
			width: 0;
			height: 100%;
			border-top-left-radius: 10px;
			border-bottom-right-radius: 10px;
			position: absolute;
			top: 0;
			left: 0;
			background: #fff;
			z-index: -1;
			transition: 0.5s;
		}
		.about-btn a:hover span{
			width: 100%
		}
		.about-btn a:hover {
			color: #D59F00;
		}
		
		@media screen and (max-width: 770px){
			.about-title-text h1{
				font-size: 35px;
			}
			.abouts{
			   flex-basis: 100%;
				margin-top: 30px;
		    }
			.about-btn a{
				display: block;
			}
			.abouts h1{
			   font-size: 30px;
		    }
			.about-img{
			   flex-basis: 100%;
		    }
			.about-img img{
				width: 100%;
			}
		}

        /*---feature---*/
		
		#feature{
			width: 100%;
			
            background-color: #241100;
			padding: 20px 0;
		}
		.title-text{
			text-align: center;
			padding-bottom: 70px;
            color: #444444;
		}
		.title-text p{
			margin: auto;
			font-size: 20px;
			color:  #D59F00;
			font-weight: bolder;
			position: relative;
			z-index: 1;
			display: inline-block;
		}
        
		.title-text h1{
			font-size: 60px;
            font-weight: 900;
		}
		.feature-box{
			margin: auto;
			width: 80%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			text-align: center;
			
		}
		.features{
			flex-basis: 50%;
		}
		.features-img{
			flex-basis: 50%;
			margin: auto;
			filter: grayscale(100%);
			transition: .9s ease;
		}
		.features-img img{
			width: 70%;
			border-radius: 30px;
			cursor: pointer;
		}
		.features-img:hover{
			filter: grayscale(0%);
			
		}
		.features-img:hover{
			transform: scale(1.1)
		}
		.features h1{
			text-align: left;
			margin-bottom: 10px;
			font-weight: bold;
			color: #D59F00;
		}
		.features-desc{
			display: flex;
			align-items: center;
			margin-bottom: 40px;
		}
		.features-icon {
			width: 50px;
			height: 32px;
			font-size: 30px;
			line-height: 40px;
			border-radius: 8px;
			color: #D59F00;
			border: 1px solid #D59F00;
		}
		.features-text p{
			padding: 0 20px;
			text-align: initial;
            color: #fff;
			line-height: 1.5;
		}
		@media screen and (max-width: 770px){
			.title-text h1{
				font-size: 35px;
			}
			.features{
			   flex-basis: 100%;
		    }
			.features-img{
			   flex-basis: 100%;
		    }
			.features-img img{
				width: 100%;
			}
		}

        		/*portfoio*/
		#portfolio{
			width: 100%;
			padding: 70px 0;
			background: #0D0D0D;
		}
        .title-text h2{
            font-size: 50px;
            color: #fff;
        }
        pan{
            color: #D59F00;
        }
		.portfolio-box{
			width: 80%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			margin: auto;
            align-items: baseline;
		}
		.single-portfolio{
			flex-basis: 30%;
			text-align: center;
			border-radius: 7px;
			margin-bottom: 20px;
			color: #fff;
			position: relative;
		}
		 .single-portfolio img{
			width: 100%;
			border-radius: 7px;
		}
		.overlay{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			border-radius: 7px;
			cursor: pointer;
			background: linear-gradient(rgba(0,0,0,0.5),#D59F00);
			opacity: 0;
			transition: 1s;
		}
		.single-portfolio:hover .overlay{
			opacity: 1;
		}
		.portfolio-desc{
			width: 80%;
			position: absolute;
			bottom: 0%;
			left: 50%;
			opacity: 0;
			transform: translateX(-50%);
			transition: 1s;
		}
		hr{
			background: #fff;
			height: 2px;
			border: 0;
			margin: 15px auto;
			width: 60%
		}
		.portfolio-desc p{
			font-size: 14px;
		}
		.single-portfolio:hover .portfolio-desc{
			bottom: 40%;
			opacity: 1;
		}
		@media screen and (max-width: 770px){
			.single-portfolio{
				flex-basis: 100%;
				margin-bottom: 30px;
			}
			.portfolio-desc p{
			    font-size: 12px;
		    }
			hr{
				margin: 5px auto;
			}
			.single-portfolio:hover .portfolio-desc{
			    bottom: 25% !important;
			
		    }
		}
        /* youtube */
        /* youtube */
		#videos{
			width: 100%;
			
			padding: 70px 0;
			background: #241100;
		}
		.youtube-content{
			display: flex;
			justify-content: center;
			margin: 3rem;
			flex-wrap: wrap;
			flex-basis: 40%;
		}
		.vidd iframe{
			border-radius: 20px;
			border: 3px solid #D59F00;
			transition: .5s ease;
		}
		.vidd iframe:hover{
			transform: scale(1.1);
		}
		.vidd-text{
			flex-basis: 50%
		}
		.vidd-text p{
			width: 80%;
			color: #fff;
			line-height: 1.5;
			margin-top: 10px;
		}
		.vidd-text h1{
			color: #fff;
			margin-top: 10px;
		}
		.vidd-text span{
			color: #D59F00;
		}
		.tube-btn{
			margin-top: 20px;
		}
		.tube-btn a{
			width: 120px;
			height: 40px;
			border-top-left-radius: 10px;
			border-bottom-right-radius: 10px;
			text-decoration: none;
			display: inline-block;
			margin: 5px ;
			padding: 10px 0;
			color: #D59F00;
			font-weight: bold;
			border: 2px solid #f1f1f1 ;
			position: relative;
			text-align: center;
			z-index: 1;
			transition: color 0.5s;
		}
		.tube-btn a span{
			width: 0;
			height: 100%;
			border-top-left-radius: 10px;
			border-bottom-right-radius: 10px;
			position: absolute;
			top: 0;
			left: 0;
			background: #fff;
			z-index: -1;
			transition: 0.5s;
		}
		.tube-btn a:hover span{
			width: 100%;
		}
		.tube-btn a:hover {
			color: #D59F00;
		}
		@media screen and (max-width: 770px){
			.vidd-text{
				width: 100%;
			}
			.vidd-text p{
				width: 100%;
			}
			.vidd iframe{
				width: 100%;
				margin: 1rem auto;
			}
			.youtube-content{
				width: 100%;
				margin: auto;
			}
			
		}
		.plan{
			display: flex;
			justify-content: center;
		}
		#mypdf{
			width: 78%;
			height: 700px;
			border-radius: 30px;
		}


		/*contact*/
		#contact{
			width: 100%;
			padding: 20px 0;
			background-image: url("IMAGES/contact.jpg");
			background-position: center;
			background-size: cover;		}
		.contact form{
			max-width: 45rem;
			margin: 1rem auto;
			text-align: center;
			margin-bottom: 3rem;
		}
		.title-text h2 span{
			color: #D59F00;
		}

		.contact form .input-box{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		
		.contact form .input-box input,
		.contact form textarea{
			width: 95%;
			padding: 1.2rem;
			font-size: 1rem;
			color: #fff;
			background: #111111;
			border-radius: .8rem;
			margin: .7rem auto;
			transition: .5s ease;
		}
		input:hover{
			transform: scale(1.07);
			box-shadow: 0 0 0.5rem #D59F00;
		}
		textarea:hover{
			transform: scale(1.07);
			box-shadow: 0 0 0.5rem #D59F00;
		}
		
		.contact form textarea{
			resize: none;
		}
		
		.contact form .btn{
			margin-top: 2rem;
			cursor: pointer;
		}
		input:focus-within {
			outline: none;
			border-color: #D59F00;
			border-width: 3px;
		}
		textarea:focus-within {
			outline: none;
			border-color: #D59F00;
			border-width: 3px;
		}
		
		@media screen and (max-width: 770px){
			.contact form .input-box input{
				width: 80%;
				margin:  0.4rem auto;
			}
			.contact form textarea{
				width: 80%;
			}
		}
		
		
		.footer{
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			padding: 1rem 9%;
			background: #070707;
		}
		.footer p{
			font-size: 1.1rem;
			color: #fff;
		}
		.footer-iconTop a{
			display: inline-flex;
			justify-content: center;
			align-items: center;
			padding: .3rem;
			background: #D59F00;
			font-size: 3rem;
			color: #fff;
			transition: .5s ease;
		}
		.footer-iconTop a:hover{
			box-shadow: 0 0 1rem #00CFE0 ;
			transform: rotate(180deg);
		}
		.footer-iconTop a i{
			font-size: 3rem;
			color: #fff;
		}
		@media screen and (max-width: 770px){
			.footer p{
				font-size: 1rem;
			}
			.footer-media {
				margin: 1 rem auto;
			}
		}

		.btn {
			width: 150px;
			height: 40px;
			text-decoration: none;
			display: inline-block;
			font-size: 12px;
			text-align: center;
			margin: 5px 10px;
			padding: 10px 0;
			color: #fff;
			font-weight: bold;
			border: 2px solid #00CFE0 ;
			position: relative;
			border-radius: 20px;
			z-index: 1;
			transition: 0.5s ease;
			background-color: #111111;
		}
		.btn:hover {
			transform: scale(1.1)
		}
		.btn:hover {
			color: #D59F00;
		}
		
		.footer-media{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        .footer-media a{
            display: inline-flex;
            justify-content: center;
            text-decoration: none;
            align-items: center;
            width: 1.5rem;
            height: 1.5rem;
            background: transparent;
            border-radius: 50%;
            font-size: 1.5rem;
            color: #D59F00;
            margin: 0 1rem 0 0;
            transition: .5s ease;
        }
        .footer-media a:hover{
            color: #fff;
			transform: scale(1);


}