/*  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 80px;
    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: #111;
    transform: translateX(-50%);
}

section .title::after {
    position: absolute;
    bottom: -8px;
    left: 50%;
    font-size: 20px;
    color: crimson;
    padding: 0 5px;
    background: #fff;
    transform: translateX(-50%);
}


/* navbar styling */

.navbar {
    position: fixed;
    width: 100%;
    z-index: 999;
    padding: 30px 0;
    font-family: 'Ubuntu', sans-serif;
    transition: all 0.3s ease;
}

.navbar.sticky {
    padding: 15px 0;
    background: crimson;
}

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

.navbar .logo a {
    color: #fff;
    font-size: 35px;
    font-weight: 600;
}

.navbar .logo a span {
    color: rgb(99, 7, 122);
    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: crimson;
}

.navbar.sticky .menu li a:hover {
    color: rgb(99, 7, 122);
}


/* menu btn styling */

.menu-btn {
    color: #fff;
    font-size: 23px;
    cursor: pointer;
    display: none;
}

.scroll-up-btn {
    position: fixed;
    height: 45px;
    width: 42px;
    background: rgb(99, 7, 122);
    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("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAQEhMQEBAQFRIXEBAQEhAXEA8VEBUVFRUWFxYVExUYHSggGBolGxUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGhAQGi8lIB8tKy0tLSstLS0tLS0tLS0tLS0tLS0tLS0tLS0tKy0tLS0tLS0tNy0tLSs3Ky03Ky0tK//AABEIAOEA4QMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAAAQYCBAUDB//EAD4QAAIBAQQHAwkGBgMBAAAAAAABAgMEBRExBhIhQVFxsTJhkRMiM1JygaHB0SM0QkNiglNzkuHw8RUWomP/xAAaAQEAAwEBAQAAAAAAAAAAAAAAAgMEAQUG/8QAKxEAAgICAQIFAwQDAAAAAAAAAAECAwQRMRIhBTIzQVETIiNCYYGhFBU0/9oADAMBAAIRAxEAPwD4aAAAAAAAAAAAAAAAAAAAAAAAACSdUDRiDLVZGAO6IBJAOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnAHvY6OvOMFvkl4g7FbekdS4bjlaPOlsprfxfBFzst3UaSwhTiu/DF+J6WaiqcIwjkkl/c1r0vWnZ44y2t5RWf+ho+kox6sevqmbNWy05LCUItd6RXb70ajg50FtW108/A37u0ipVpamDjJ5YtYPuxOviCcq6MmD6T5VKOBid3SyxqnV1llLzvfvOGwfN21uubi/YgAArAAAAAAAAAAAAAAAAAAABOABBJlCm5PBJt7klizu2DRirPB1GoLg9s/AFtdM7HqKODgZ06MpZJvki82TR+z084ub4y+iOnTpRjsjGKXBJI7o9CvwuT8z0fO6d115ZUp/0s9f+FtP8Gf8ASz6GSd0X/wCrh8nzC0WeVNuM01Jbnmbej/3in7SNjSr7xP8Ab0Rr3B6en7SInmKPReo/DPohStMnjWX8uPVl0xKTph6dfy49WSZ7HiT/AAnIsbwnFr1o9T6fFny+y9uPtLqfTU+i6HEUeEvtIq+nH5XKXyKoWrTd+i5S6oqrDMOf68iAAcMYAAAAAAAAAAAAAAAAJQAR1Louadd5YQ3yeXu4m3cVxOrhUqbIZpb5f2LhTgopKKSSySyR1LZ6WJguf3T4NW77rpUF5i275PDWZumtbbdTox1pyw4Le+SKpeWklSpjGn5keK7T5sk2kejZkVY60i12q8KVLtziu7OXgjkWjSumuxCUu9vBFQlNva3i+JiR2edZ4la/L2LddukU61WNPUgk2/Wxy5lkTKDo4vt4c30ZfCUTfgWznBub2UbSr7xL9vRHhcH3in7SPfSn7xLkuhr3B6en7SIvk8mX/R/J9CKVpf6ZexHqy6FL0v8ATr+XHqyTPU8Rf4TkWXtx5rqfTIvZ7l0PmVm7UeaPpcclyRxIp8L/AFFY02/K5S6oqzLRptnS5S6oq7OMw53rSIABwyAAAAAAAAAAAAAkgIAySOzo7dPlpa0l5ie3vfA51gssqs4wjvZ9AsdnjTgoRWxLx7yUVs3YWP8AUl1PhHtGKiklsSyOdfN7xs63Obyjw72Z3veCoQ1vxPZFd/H3FEtFeU5OUni3tbJSejdl5SqXRDkytlrnVk5zeLZ4xi3ke1kss6slGCxb/wA2lzuq5adFYvCU/W3LkQS2ebTRO+W/7ODd+jlWphKfmR7+0/cd6y3DZ6ecdd8ZfTI6aNe1W+lS2zml3bW/BE+lI9WONTUty/s96dGMezGK5JIzOBX0opLsQlLv2JHh/wBs/wDl/wC/7HdoksumPZM5mlH3iXu6HhcHp6ftIwvW2eWqOphhjhsxxM7g9PT9pFfueP1KV+18n0Apel3pl/Lj1ZcsSm6W+mX8uPVk5HqeIekcizdqPNdT6UslyR81s3aj7S6n0mL2e5HIFPhn6is6a/l8pdUVdln00fouUuqKwzkuTHm+tIgAETIAAAAAAAAAAAACcAj2stHXlGKzbSB1Lb0WfRSx6sHVa2vZHlvO9Kaim3kli+SMKFJQjGKySSOTpTa9SmoLOWfIuXZHvR1TSV2+Le61Ryx2LZFdxqUKMpyUYrFt4JHmWnRawJLy0ltyj82VpbZ5FcHdZ3OpdF3RoRw/E9spfJdxvVKqinJtJLNkY/7Kdf17OrJwg/s18XxLG+lHrWWxx4JI9720jlJuNHzY+t+J8uBwZzb2t4sxOvdtxVK3nPzIes1tfJFXdnkylbfL5OQSXazXFQhnHWfFv5GzK7aDWHkoe5bfEkoMvXh82uT5+zfuD09P2jC97KqVWUFlu5PIyuL09P2kRXJmhFxtSfsy/FN0s9MvYj1ZcMSn6V+m/ZHqyyaPVz3+I5Nm7Uea6n0hPYuSPm1m7Uea6n0dZe5Csp8O4kVrTPOlyl1RWWWbTPOnyl1RWWQlyZMz1mQACJlAAAAAAAAAAAAJOzoxR1qyfqpy+XzOMizaIU9lSXsx6t/IlBbZfjR3YizYlJ0ktGvWkt0cIr5/EuUngm+5nzy1VNacpcZSfxLLTdnz1FRJs1JznGKzckvFn0Gz0lCKgskkin6M0tasn6qcv88S5CpDAhqLkcnSW26lPUWcsfApuJ1dJK+vWkt0fN+pz7JS15xjxaRCXdmTJm7LNHZ0eupVH5SovNT2Liy1pHnQpKEYxWSWCNG/Ly8jDZ23l3d7LUulbPSrjGivZtWu30qS8+SXdtb8Ec6rpNRWOqpN7tmCKlWrSm8ZNt8WeeJW5sxTz5vymxbrU6s3N5t/4j3uP09P2kaBv3H6en7SILky1vdib+S+FO0r9MvYj1ZcCn6V+m/ZHqy6zg9POf4zlWXtR9pdT6Ksvcuh86s3ajzXU+iJ7FyXQ5UV+HvsyuaZfl8pdUVksumD9Hyl1RWiE+TJl+qwDuXbo+6sVOUtVPJYYvmal7XVKg1i8YvKX1I6eit0zUerXY5oJaBwqIBIAIBIAIAABKLXokvs5e0uhVEWrRN/Zy9r5FlfmNWJ6iO1a39nP2JdD55PM+hWrbCS/TLofPpraStRdn8o72iUfPm/0/MtBVtE54TkuMfmWjElX5TRiekUG8JY1Jv9cupt6OQxrx7sX4I1LxjhUmv1S6mzo9U1a8e/FeKZSuTzo+r/ACXZlN0lrOVZrckkvDH5lxbKhpLQcarlukk8fcXWrsb83vX2OMACg8kk37j9NT9pGgjraOUHKsnuj5z+R2PJZStzRcsSo6Vem/ZH5ltTKZpHUxrS7kol1vZHpZr/ABpGhZu1H2l1PocclyXQ+e2KOM4rjKPU+go5V7leBwyuaX/l8pdUVyJYdLpYygu59SvRK7PMZsl7tZf7A/s4ewjnaVLGku6S+J0bFspwX6Y9Dm6Uy+yS4yXwLpeQ9C70dFRABmPHAAAAAAIAAOElj0Uq9uPJlcR1NHq+rWjwfmk4PUkXUS1NFwe0oNrp6s5R4Sa+JfsCo6SWfVquW6SUvfvLbka81bimY6PVtWtHHf5viXI+e0Z6sk1mmmXqyVteEZrekKX20dwp9nErGklDVquWGyST9+85lCo4yUlmmmW6/rH5Sns7Udq+aKc9hXZHpkZsiHRPaL9ZLSqkIzW9Lx3njelgVeGrlJbYv5ciuXJenknqyxcH8HxRbadRSWMWmnk1kXRaktG2qyNsNModqsk6bcZxafI8MD6DVpRksJRTXBrFGr/xVDPycfiQdPwZ5Yb39rKfZrNKo9WKbLjdFgVCOH4n2n8ke9KjGCwjGMV3LAzlNJYt4Le2ThWo8l9NCr+5kWmuqcZTeSX+kUO0VXOUpPNtvxOnfl6eVepHHUXxfE5GBVZLbMmVb1y0vY6mjtn160Xuj5xccTk6P2LydPWfalt5LcdC0VVCLk8ksS2tdMdmzHj0V7ZVtJK2tVaX4Ul9Tm2aGtKK4tLxFoqucpSebbZv6PWfXqp7o4y+hRzI89tzsLhCOCS4LA4GltXZTjzfQsBUNJK+tVw9VKPvzZfb2jo35UtV6OSADKeWAAAAAAQAAcB6UZ6rTW54nmSAnov1lrqpCM1vWJo3/ZfKU8VnHauW9GlozbM6Tf6o/M772mxanE9WLVtej58d/Ru34fZSex7Yvv4GjfVh8lN4dl7V9Dnwm1tWZmW4M8+LdUz6CVu/brwbqQWz8UeHeu46Nz3mqsdWXbXxXE6TNbSsiehJRuifPjcsN5VKXZez1Xkdi8riUvOpbHvju9xwK9nnB4Si1zRlcXBmCUJ1ssdn0jpvtxcX3bUbH/OWf1//ACynA79aRNZViLTX0iprsRlL4I4tvvSpV2N4R9VZGgj1o2eU3hFNvkRc5SISunPseZ27jutyaqTXmrJcX9D3u24sPOq7f0rL3neisFgl7i2ur3ZfRj+8iYs4Gklv/Ji++XyRu3veKoxwTxm8lw72VKpNybbe07bNcInk3LXSjEtmjtl1IazW2XRZHCuew+Vnt7K2yZcYpLYsskcph7leLX36mRXqqEXJ5JYlDtFRyk5PNtssOktswSprftZWzl0tvSOZVm5a+DEkgkoMgAAOgAAEAAHAAAD2s9VwkpLNPEulhtSqwU1ya4PgUbE3rrvB0ZcYvtL58y2qfSy+i3oZa7bZY1YuElyfBlNtlllTk4yX0feXWlVUkpReKeRr2+xxqxwlnulvRosrUltGm6tTXUinU5uLxTaa2lluy+4ywjU2Sy1tz+hwrbYZ0nhJbN0tzNVGaMnBmSFkq2X/AFkY1KcZLCSTXekyn2O9KlLYniuD2o7Fn0hg+1Fp921GhWxlybI5EJdmbNW5qEvwYcngjydwUf1eKNqnedGWU49D1Vrp/wASH9SJdNZLpqfwalG5aEfw482b9KnGKwjFJcEsDWqXlRjnOPu2s0rRf9NdhOXwQ3XEdVcODss5N531GGMYNOXHcvqziW29KlTY3gvVWRosqsu+Ci3K32iZ1qsptyk8WzOy2aVSSjFbX8O9mVisU6ssIrm9yLXYLBGjHBbXvlhmVwrcn3KqqnN7PSwWSNGKis82+LMrXao0ouUvcuL4GdSainJvBIqV7Xg6stnZWS+ZonJQjo12TVcdI1bVXdSTk828TxGJBjZ5ze+4JIJOHAAAdAAAIAAOAAAAnEgAHSuu8nSeD2xea+aLTQrxmtaLTRRUbNjtk6Txi+a4l9Vzj2ZfVc49mXKrSjNaskmuBw7bcX4qT/a8/czcsN7QqbG9WXB5e5nRTNLULEaZKFiKRVoTg8JRafeeeBeakFJYNJrgzQrXPRllFrkymWNL2M8sdrgqoLBLR6Lym1zj/c8/+vP+Iv6X9Sv6EyH0ZnDB36ejy31PCPzxNujc1GOacub+h1UTZ1USZWaNGU3hFNnZsdxN4Oq8F6qz97O3ClGOyKSXIzLY0Jcl0KIrkxo0owWrFJImvWjBa0nguJo269qdPYnrS4bveyuW22zqvGT5LciU7YxWkSncoLSNi9b0dV4LZFZLe+9nNIJMcpN8mOUnJ7YIJBE4QSAAAAAAAAQAAcAAAAAABJAAJxN6yXnUp5SxXB5GgSSTa4OptcFks9/wfbi13rajdp2+lLKceWOD+JTicS+ORJclqvki8KaeTXiTiUdVGt7J8tL1n4sl/lfsWf5H7F2c0t68TwqW+lHOpHxx6FPdRve/ExxOPJ+EceQ/ZFlr37BdlOXfkjk2y9atTZjguC2GhiMSqVspFUrZSJbIBBWVgkgkAAAHQAAAAAAAACAZYDAaOGIJCQ0CAZapDQ0CACUgCAZao1RpggAAEAkHAQCUTgAYgyaIOggGSQwO6BiSAcABOBOqNHTEE4dwwGgQCSAAAADbWR51SAaZeUl7HiZ0swCiPmIGwa1XMAtt4JPgxPSiAVQ8xE2WYMA0kzXqZmIBlfJEAAiCY5m0wC2olE8ax5MAjPki+T1o5nrIAth5TsTVkAChnD1oZmwAaKvKSiQYV8kASlwGa5ABlIgAAH//2Q==") no-repeat center;
    height: 100vh;
    color: #fff;
    min-height: 500px;
    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: crimson;
    font-weight: 500;
}

.home .home-content a {
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 25px;
    padding: 12px 36px;
    margin-top: 20px;
    font-weight: 400;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}

.home .home-content a:hover {
    color: crimson;
    background: none;
}


/* about section styling */

.about .title::after {
    content: "who i am";
}

.about .about-content .left {
    width: 45%;
}

.about .about-content .left img {
    height: 400px;
    width: 400px;
    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: crimson;
}

.about .about-content .right p {
    text-align: justify;
}

.about .about-content .right a {
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}

.about .about-content .right a:hover {
    color: crimson;
    background: none;
}


/* services section styling */

.services,
.teams {
    color: #fff;
    background: #111;
}

.services .title::before,
.teams .title::before {
    background: #fff;
}

.services .title::after,
.teams .title::after {
    background: #111;
    content: "what i provide";
}

.services .serv-content .card {
    width: calc(33% - 20px);
    background: #222;
    text-align: center;
    border-radius: 6px;
    padding: 35px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.services .serv-content .card:hover {
    background: crimson;
}

.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: crimson;
    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: crimson;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 16px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}

.skills .skills-content .left a:hover {
    color: crimson;
    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: crimson;
}

.skills-content .right .arduino::before {
    width: 90%;
}

.skills-content .right .artifical_intlegence::before {
    width: 65%;
}

.skills-content .right .AdobeXD::before {
    width: 78%;
}

.skills-content .right .html::before {
    width: 80%;
}

.skills-content .right .css::before {
    width: 60%;
}

.skills-content .right .js::before {
    width: 20%;
}

.skills-content .right .php::before {
    width: 50%;
}

.skills-content .right .mysql::before {
    width: 50%;
}


/* teams section styling */

.teams .title::after {
    content: "who with me";
    color: rgb(99, 7, 122);
}

.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: rgb(99, 7, 122);
}

.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 rgb(224, 214, 226);
    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 rgb(99, 7, 122)!important;
    transition: all 0.3s ease;
}

.owl-dot.active {
    width: 35px;
    border-radius: 14px;
}

.owl-dot.active,
.owl-dot:hover {
    background: rgb(99, 7, 122)!important;
}


/* contact section styling */

.contact .title::after {
    content: "get in touch";
    color: rgb(199, 130, 2);
}

.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: rgb(199, 130, 2);
}

.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: rgb(199, 130, 2);
    border: 2px solid rgb(199, 130, 2);
    transition: all 0.3s ease;
}

.right form .button-area button:hover {
    color: rgb(199, 130, 2);
    border: 2px solid rgb(199, 130, 2);
    background: none;
}


/* social media section styling */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

.cards {
    max-width: 1100px;
    margin: 0 auto;
    background: #fff;
    text-align: center;
    padding: 30px;
}

.cards h2.header {
    background: #fff;
    background-color: #fff;
    font-size: 40px;
    background: #fff;
    margin: 0 0 30px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #fff;
}

.services {
    display: flex;
    align-items: center;
}

.content {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    margin: 20px;
    padding: 20px;
    border: 2px solid black;
    border-radius: 4px;
    transition: all .3s ease;
}

.content .fab {
    font-size: 70px;
    margin: 16px 0;
}

.content>* {
    flex: 1 1 100%;
}

.content:hover {
    color: white;
}

.content:hover a {
    border-color: white;
    background-color: #fff;
}

.content-1:hover {
    border-color: #0e76a8;
    background: #0e76a8;
}

.content-1:hover a {
    color: #0e76a8;
}

.content-2:hover {
    background-image: linear-gradient(to bottom left, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
}

.content-2:hover a {
    color: #833AB4;
}

.content-3:hover {
    border-color: #ff0000;
    background: #ff0000;
}

.content-3:hover a {
    color: #ff0000;
}

.content h2 {
    font-size: 30px;
    margin: 16px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.content p {
    font-size: 17px;
    font-family: 'Poppins', sans-serif;
}

.content a {
    margin: 22px 0;
    background: black;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid black;
    padding: 15px 0;
    border-radius: 25px;
    transition: .3s ease;
}

.content a:hover {
    border-radius: 4px;
}

@media (max-width: 900px) {
    .services {
        display: flex;
        flex-direction: column;
    }
}


/* footer section styling */

footer {
    background: rgb(20, 20, 20);
    padding: 15px 23px;
    color: #fff;
    text-align: center;
}

footer span a {
    color: rgb(99, 7, 122);
    text-decoration: none;
}

footer span a:hover {
    text-decoration: underline;
}


/* 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 50px;
    }
}

@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: rgb(0, 0, 0);
        opacity: 70%;
        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;
    }
}