/*  import google fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');

*{margin: 0; padding: 0; box-sizing: border-box; text-decoration: none;}
html{scroll-behavior: smooth;}

/* custom scroll bar */
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background: #888;}
::-webkit-scrollbar-thumb:hover {background: #555;}

/* all similar content styling codes */
section{padding: 100px 0;}
.max-width{max-width: 1300px;padding: 0 20px;margin: auto;}
.about, .services, .skills, .teams, .contact, footer{font-family: 'Poppins', sans-serif;}
.about .about-content,.services .serv-content,.skills .skills-content,
.contact .contact-content{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;}
section .title{position: relative;text-align: center;font-size: 40px;font-weight: 500;margin-bottom: 60px;
padding-bottom: 20px;font-family: 'Ubuntu', sans-serif;}
section .title::before{content: "";position: absolute;bottom: 0px;left: 50%;width: 180px;
height: 3px;background: #b5322a;transform: translateX(-50%);}
section .title::after{position: absolute;bottom: -8px;left: 50%;font-size: 20px;
color: #b5322a;padding: 0 5px;background: #fff;transform: translateX(-50%);}

/* navbar styling */
.navbar{position: fixed; width: 100%; z-index: 999; padding: 7px 0;
    font-family: 'Ubuntu', sans-serif; transition: all 0.3s ease;}
.navbar.sticky{padding: 5px 0; background: #b5322a;}
.navbar .max-width{display: flex;align-items: center;justify-content: space-between;}
.navbar .logo a{color: #fff;}
.navbar .logo a span{color: #b5322a;transition: all 0.3s ease;}
.navbar.sticky .logo a span{color: #fff;}
.navbar .menu li{list-style: none;display: inline-block;}
.navbar .menu li a{display: block;color: #fff;font-size: 18px;
font-weight: 500;margin-left: 25px;transition: color 0.3s ease;}
.navbar .menu li a:hover{color: #888;}
.navbar.sticky .menu li a:hover{color: #bdbdbd;}

/* menu btn styling */
.menu-btn{color: #fff;font-size: 23px;cursor: pointer;display: none;}
.scroll-up-btn{position: fixed;height: 45px;width: 42px;background: #b5322a; right: 30px;
bottom: 10px;text-align: center;line-height: 45px;color: #fff;z-index: 9999;font-size: 30px;
border-radius: 6px;border-bottom-width: 2px;cursor: pointer;opacity: 0;pointer-events: none;transition: all 0.3s ease;}
.scroll-up-btn.show{bottom: 30px;opacity: 1;pointer-events: auto;}
.scroll-up-btn:hover{filter: brightness(90%);}

/* home section styling */
.home{display: flex;background: url("../img/banner.jpg") no-repeat center;height: 100vh;color: #fff;
background-size: cover;background-attachment: fixed;font-family: 'Ubuntu', sans-serif;}
.home .max-width{width: 100%;display: flex;}
.home .max-width .row{margin-right: 0;}
.home .home-content .text-1{font-size: 27px;}
.home .home-content .text-2{font-size: 75px;font-weight: 600;margin-left: -3px;}
.home .home-content .text-3{font-size: 40px;margin: 5px 0;}
.home .home-content .text-3 span{color: #bebebe; font-weight: 500;}
.home .home-content a{ display: inline-block;background: #2c2c2c;color: #FFF;font-size: 25px;padding: 12px 36px;
margin-top: 20px;font-weight: 400;border-radius: 6px;border: 2px solid #FFF;transition: all 0.3s ease;}
.home .home-content a:hover{color: #FFF;background: none;}

/* about section styling */
.about .title::after{content: "Who we are";}
.about .about-content .left{width: 45%;}
.about .about-content .left img{height: auto;width:94%;
object-fit: cover;border-radius: 6px;}
.about .about-content .right{width: 55%;}
.about .about-content .right .text{font-size: 25px;font-weight: 600;margin-bottom: 10px;}
.about .about-content .right .text span{color:#2c2c2c;}
.about .about-content .right p{text-align: justify;}
.about .about-content .right a{display: inline-block;background: #b5322a;color: #fff;
font-size: 20px;font-weight: 500;padding: 10px 30px;margin-top: 20px;border-radius: 6px;
border: 2px solid #2c2c2c;transition: all 0.3s ease;}
.about .about-content .right a:hover{color: #2c2c2c;background: none;}

/* services section styling */
.services, .teams{color:#fff;background: #2c2c2c;}
.services .title::before, .teams .title::before{background: #fff;}
.services .title::after,.teams .title::after{background: #222;content: "What I provide";}
.services .serv-content .card{width: calc(33% - 20px);background: #222;text-align: center;
border-radius: 6px;padding: 50px 25px;cursor: pointer;transition: all 0.3s ease;}
.services .serv-content .card:hover{background: #b5322a;}
.services .serv-content .card .box{transition: all 0.3s ease;}
.services .serv-content .card:hover .box{transform: scale(1.05);}
.services .serv-content .card i{font-size: 50px;color: #b5322a;transition: color 0.3s ease;}
.services .serv-content .card:hover i{color: #fff;}
.services .serv-content .card .text{font-size: 25px;font-weight: 500;margin: 10px 0 7px 0;}

/* skills section styling */
.skills .title::after{content: "What I know";}
.skills .skills-content .column{width: calc(50% - 30px);}
.skills .skills-content .left .text{font-size: 20px;font-weight: 600;margin-bottom: 10px;}
.skills .skills-content .left p{text-align: justify;}
.skills .skills-content .left a{display: inline-block;background: #b5322a;color: #fff;font-size: 18px;font-weight: 500;
padding: 8px 16px;margin-top: 20px;border-radius: 6px;border: 2px solid #b5322a;transition: all 0.3s ease;}
.skills .skills-content .left a:hover{color: #FFF;background: none;}
.skills .skills-content .right .bars{margin-bottom: 15px;}
.skills .skills-content .right .info{display: flex;margin-bottom: 5px;align-items: center;justify-content: space-between;}
.skills .skills-content .right span{font-weight: 500;font-size: 18px;}
.skills .skills-content .right .line{height: 5px;width: 100%; background: lightgrey;position: relative;}
.skills .skills-content .right .line::before{content: "";position: absolute;height: 100%;
left: 0;top: 0;background: #b5322a;}
.skills-content .right .html::before{width: 90%;}
.skills-content .right .css::before{width: 60%;}
.skills-content .right .js::before{width: 80%;}
.skills-content .right .php::before{width: 50%;}
.skills-content .right .mysql::before{width: 70%;}

/* teams section styling */
.teams .title::after{content: "Comments";}
.teams .carousel .card{background: #222;border-radius: 6px;padding: 25px 35px;
text-align: center;overflow: hidden;transition: all 0.3s ease;}
.teams .carousel .card:hover{background: #b5322a;}
.teams .carousel .card .box{display: flex;flex-direction: column;
align-items: center;justify-content: center;transition: all 0.3s ease;}
.teams .carousel .card:hover .box{transform: scale(1.05);}
.teams .carousel .card .text{font-size: 25px;font-weight: 500;margin: 10px 0 7px 0;}
.teams .carousel .card img{height: 150px;width: 150px;object-fit: cover;
border-radius: 50%;border: 5px solid #b5322a;transition: all 0.3s ease;}
.teams .carousel .card:hover img{border-color: #fff;}
.owl-dots{text-align: center;margin-top: 20px;}
.owl-dot{height: 13px;width: 13px;margin: 0 5px;outline: none!important;
border-radius: 50%;border: 2px solid #b5322a!important;transition: all 0.3s ease;}
.owl-dot.active{width: 35px;border-radius: 14px;}
.owl-dot.active, .owl-dot:hover{background: #b5322a!important;}

/* contact section styling */
.contact .title::after{content: "Get in touch";}
.contact .contact-content .column{width: calc(50% - 30px);}
.contact .contact-content .text{font-size: 20px;font-weight: 600;margin-bottom: 10px;}
.contact .contact-content .left p{text-align: justify;}
.contact .contact-content .left .icons{margin: 10px 0;}
.contact .contact-content .row{display: flex;height: 65px;align-items: center;}
.contact .contact-content .row .info{margin-left: 30px;}
.contact .contact-content .row i{font-size: 25px;color: #b5322a;}
.contact .contact-content .info .head{font-weight: 500;}
.contact .contact-content .info .sub-title{color: #333;}
.contact .right form .fields{display: flex;}
.contact .right form .field,.contact .right form .fields .field{height: 45px;width: 100%;margin-bottom: 15px;}
.contact .right form .textarea{height: 80px;width: 100%;}
.contact .right form .name{margin-right: 10px;}
.contact .right form .field input,.contact .right form .textarea textarea{height: 100%;width: 100%;border: 1px solid lightgrey;
border-radius: 6px;outline: none;padding: 0 15px;font-size: 17px;font-family: 'Poppins', sans-serif;transition: all 0.3s ease;}
.contact .right form .field input:focus,.contact .right form .textarea textarea:focus{border-color: #b3b3b3;}
.contact .right form .textarea textarea{padding-top: 10px;resize: none;}
.contact .right form .button-area{display: flex;align-items: center;}
.right form .button-area button{color: #fff;display: block;width: 160px!important;height: 45px;outline: none;font-size: 18px;
font-weight: 500;border-radius: 6px;cursor: pointer;flex-wrap: nowrap;background: #b5322a;border: 2px solid #FFF;transition: all 0.3s ease;}
.right form .button-area button:hover{color: #FFF;background: #333;}
/* footer section styling */
footer{background: #b5322a;padding: 15px 23px;color: #fff;text-align: center;}
footer span a{color: #FFF;text-decoration: none;}
footer span a:hover{text-decoration: none;}

/* responsive media query start */
@media (max-width: 1104px) {.about .about-content .left img{height: 350px;width: 350px;}}

@media (max-width: 991px) {.max-width{padding: 0 10px;}}

@media (max-width: 947px){
    .menu-btn{display: block;z-index: 999;}
    .menu-btn i.active:before{content: "\f00d";}
    .navbar .menu{position: fixed;height: 100vh;width: 100%;left: -100%;top: 0;
    background: #b5322a;text-align: center;padding-top: 80px;transition: all 0.3s ease;}
    .navbar .menu.active{left: 0;}
    .navbar .menu li{display: block;}
    .navbar .menu li a{display: inline-block;margin: 20px 0;font-size: 25px;}
    .home .home-content .text-2{font-size: 70px;}
    .home .home-content .text-3{font-size: 35px;}
    .home .home-content a{font-size: 23px;padding: 10px 30px;}
    .max-width{max-width: 930px;}
    .about .about-content .column{width: 100%;}
    .about .about-content .left{display: flex;justify-content: center;margin: 0 auto 60px;}
    .about .about-content .right{flex: 100%;}
    .services .serv-content .card{width: calc(50% - 10px);margin-bottom: 20px;}
    .skills .skills-content .column, .contact .contact-content .column{width: 100%;margin-bottom: 35px;}
}

@media (max-width: 690px) {
    .max-width{padding: 0 23px;}
    .home .home-content .text-2{font-size: 60px;}
    .home .home-content .text-3{font-size: 32px;}
    .home .home-content a{font-size: 20px;}
    .services .serv-content .card{width: 100%;}
}

@media (max-width: 500px) {
    .home .home-content .text-2{font-size: 50px;}
    .home .home-content .text-3{font-size: 27px;}
    .about .about-content .right .text, .skills .skills-content .left .text{font-size: 19px;}
    .contact .right form .fields{flex-direction: column;}
    .contact .right form .name,.contact .right form .email{margin: 0;}
    .right form .error-box{width: 150px;}
    .scroll-up-btn{right: 15px;bottom: 15px;height: 38px;
    width: 35px;font-size: 23px;line-height: 38px;}
}
@media only screen and (max-device-width : 1223px) and (orientation : landscape){.home .home-content{margin-top: -2%;}.qr{width: 45%;height:45%;}
.home .home-content .text-2{font-size: 35px;}.home .home-content .text-1{font-size: 20px;}.home .home-content .text-3{font-size:17px;}
.home .home-content a{font-size: 19px;padding: 5px 36px;margin-top:7px;}}