style.css

*{margin:0;padding:0;text-decoration: none;font-family:"Ubuntu",sans-serif;box-sizing: border-box;}

html{scroll-behavior:smooth;}

::selection{background-color:black,#48dbfb60;}  


::-webkit-scrollbar{width:10px;background-color:#f1f1f1;}


::-webkit-scrollbar-thumb>{background-color: #353b48;}

/*selection two color then anyone cannot copy any content from my website*/


.navbar{position: fixed;background-color:transparent;width: 100%;padding:30px 0;top:0;z-index:999;transition: ,3s linear;}

.inner-width{max-width:1300px;margin:auto;padding:0 40px;}

.navbar .inner-width{display:flex;align-items:center;justify-content:space-between;}

.logo{width:44px;height:32px;font-family:cursive;font-size:34px;color:orange;}

.menu-toggler{background:none;width: 30px;border:none;cursor:pointer;position: relative;outline:none;z-index: 999;display: none;}


.navbar-menu a{color:#fff;font-size:15px;font-weight:500;margin-left:30px;transition: .2s linear;}

.navbar-menu a:hover{color:#48dbfb !important;}

.sticky{background-color: #fff;padding:18px 0;}

.sticky .navbar-menu a{color:#111;}

.sticky .menu-toggler span{background-color:#111;}


#home{height:100vh;min-height:500px;background:linear-gradient(#607d8b91,#607d8bc9),url(image/city.jpg) no-repeat center;
background-size:cover;background-attachment:fixed;}

#home .inner-width{display:flex;align-items: center;justify-content:center;height:100%;text-align: center;}

#home .content{width: 100%;color:#fff;}

#home .content h1{font-size:60px;margin-bottom:60px;}

#home .content h1::after{content:"ThemeCity";animation:textanim 4s linear infinite;}


@keyframes textanim{
	25%{content :"A Cryptographer ";}

	50% {content: "A Designer";}

	75%{content: "A Developer";}

	95%{content: "A Cyber Security Speacilist";}

}

.sm a{color:#fff;font-size:22px;margin:0 10px;transition: .2s linear;}

.sm a:hover{color: #48dbfb;}

#home .buttons{margin-top:60px;}

#home .buttons a{display: inline-block;margin:15px 30px;color:#ff5722;font-size:15px;
	font-weight:500;width:180px;border:1px solid #ff5722;
	padding:14px 0;border-radius:6px;transition: .2s linear;}


#home .buttons a:hover,
#home .buttons a:nth-child(2){

	      background-color:#ff5722;color:#fff;}




/*About Section*/

.about_section{display: flex;align-items: center;background-color:#f7f7;justify-content:center;}

.about-section{background:url(image/works/2.jpg);background-repeat:no-repeat;background-position:left;
	background-size:55% 55%;
background-color:#f7f7;overflow: hidden;padding:100px 0;}

.inner-container{max-width:55%;height:35%;color:#123;float: right;background-color:#ddd;padding:65px;
border-radius:4px;}


.inner-container h1{margin:10px 10px 30px;font-size:30px;font-weight:900;text-align: center;}

.inner-container p{color:#123;}

.text{font-size:13px;color:#545454;line-height:30px;text-align:justify;margin-bottom: 40px;}

.skills{display: flex;justify-content: space-between;font-weight: 700;font-size:13px;}



/*End About section */


section.dark{background-color:#607D8B;}

section.dark .section title{color: #f1f1f1;}

section.dark .section-title::before{background-color:#f1f1f1;}

section.dark .section-title::after{border:4px solid #363b48;}

.services{display:flex;justify-content:space-between;flex-wrap:wrap;}

.service{text-align: center;border:1px solid #48dbfb;border-radius:6px;margin: 30px 0;padding:40px 20px;color:#fff;cursor:pointer;transition:.3s linear;width: calc(50% - 20px);}

.service .icon{color:#48dbfb;font-size:40px;
	margin-bottom:40px;transition:.3s linear;}

.service h4{font-size:16px;margin-bottom:6px;}

.service:hover{background-color: #ff5722;}

.service:hover .icon{color:#fff;}

button.btn {padding:12px 21px;border:1px solid;border-radius:23px;margin:20px;color:#123;}

button.btn:hover{background:#48dbfb;}

button.btn:focus{border:none;outline:none;border:1px solid red;}

/*Education Section */

.time-line,.works{display:flex;justify-content:space-between;flex-wrap: wrap;}

.block{width:calc(50% - 20px);background-color:#fff;border:1px solid #ddd;margin:10px 0;padding:30px;position:relative;}

.block h3{font-size:16px;margin:10px 0;}

.block p{font-size:15px;color:#444;}

 /*work section */


.work{width:250px;overflow:hidden;border-radius:6px;margin:10px 21px;cursor:pointer;position:relative;}

.work img{width:100%;height:100%;transition:.4s linear;}

.work::before{content:"";position:absolute;width:100%;height:100%;z-index:1;
background-color:#ff57228a;transition:.2s linear;opacity: 0;transform:scale(0);}

.work .info{position: absolute;z-index: 2;bottom:40px;left:40px;color:#fff;transition:.4s linear;opacity:0;}

.work:hover img{transform:rotate(5deg);}

.work:hover::before,
.work:hover .info{opacity:1;transform:scale(1);}	


/*Contact section */

.contact-info{display:flex;justify-content:space-between;flex-wrap:wrap;margin-bottom:60px;}

.contact-info .item{width:calc(33% - 20px);height:160px;background:#353b48;color:#fff;text-align:center;
border-radius:4px;cursor:pointer;transition:.3s linear;}

.contact-info i{display:block;font-size:40px;line-height:120px;height:100px;}

.contact-info .item:hover{background-color:#48dbfb;}

.contact-form{display:flex;justify-content:space-between;flex-wrap:wrap;}

.contact-form input, .contact-form textarea{width:100%;height:50px;margin:10px 0;background-color:#353b48;
border:none;outline:none;padding:20px;border-radius:4px;color:#fff;}

.nameZone, .emailZone{max-width:calc(50% - 10px);}

.messageZone{min-height:200px;resize:vertical;}

.contact-form .btn{ width: 180px;background:transparent;color:#48dbfb;font-size:16px;
	border:2px solid #48dbfb;padding:0;margin-left:auto;cursor:pointer;transition: .3s linear; }

.contact-form .btn:hover{background-color:#48dbfb;color:#fff;}

footer{background:url(image/city.jpg);background-repeat:no-repeat;background-size:cover;color:#fff;padding:80px 0;text-align:center;}

.copyright{margin-bottom:20px;font-size:15px;}

.copyright a{font-size:16px;font-weight:500;color:#48dbfb;}

.goTop{position:fixed;z-index:999;bottom:40px;right:40px;width:40px;height:40px;
	background-color:#48dbfb;
	border:none;border-radius:6px;cursor:pointer;color:#fff;outline:none;display:none;}


@media screen and (max-width:980px){
	/*.menu-toggler{display: block;}

	.navbar-menu{position:fixed;height: 100vh;width:100%;background-color:#353b48;
		top:0;right:-100%;max-width:400px;padding:80px 50px;transition:.3s linear;}

	.navbar-menu a{display:block;font-size:30px;margin:30px 0;}
	
	.sticky .navbar-menu{background-color:#f1f1f1;}	


	.navbar-menu.active{right:0;}01756393359/01785047896

	.menu-toggler.active span:nth-child(1){transform:rotate(-45deg);top:4px;}

    .menu-toggler.active span:nth-child(2){transform:rotate(-45deg);opacity:0;}
 
    .menu-toggler.active span:nth-child(3){transform:rotate(45deg);bottom:14px;}
*/
    .inner-width{max-width:800px;} 
    
    .about-pic{margin:0 auto 60px;}   
    
    .about-text{flex:100%;text-align: center;}

    .service{width:calc(50% - 20px);}

    .block{width:calc(100% - 20px);margin-left:auto;}

    .work{width:calc(50% - 10px);}

    .contact-info .item{width:100%;margin:10px 0;}


}

@media screen and (max-width:600px){

	.inner-width{padding:0 20px;}

	.skill{width:100%;}

	.service{width:100%;}

	.work{width: 100%;}

	.nameZone, .emailZone{max-width:100%;}
}


@media screen and (max-width:1200px){
	.inner-container{
		padding:80px;
	}
}

@media screen and (max-width:1000px){
	.about-section{
		background-size:100%;
		padding:100px 40px;
	}

	.inner-container{width:100%;}
}


@media screen and (max-width:1200px){
	.about-section{padding:0;}

	.inner-container{padding:60px;}

}