* {
                        box-sizing: border-box;
                        margin: 0;
                        padding: 0;
                    }
                    
                    body {
                        margin: 0;
                        padding: 0;
                        background-color: black !important;
                        color: white !important;
                    }
                    
                    .sec-1 {
                        width: 80%;
                        height: auto;
                        margin: auto;
                        display: flex;
                        justify-content: space-between;
                    }
                    
                    .logo h1 {
                        font-size: 5.320644vw;
                    }
                    
                    .topnav {
                        overflow: hidden;
                    }
                    
                    .topnav a {
                        margin-top: 15%;
                        float: left;
                        display: block;
                        color: #f2f2f2;
                        text-align: center;
                        padding: 14px 16px;
                        text-decoration: none;
                        font-size: 17px;
                    }
                    
                    .topnav .icon {
                        display: none;
                    }
                    
                    .topnav .icon {
                        display: none;
                    }
                    
                    .sec-2 {
                        width: 85%;
                        height: auto;
                        margin: auto;
                        display: flex;
                        justify-content: space-between;
                        margin-top: 8%;
                    }
                    
                    .dp-image img {
                        width: 400px;
                        height: 400px;
                        border-radius: 50%;
                    }
                    
                    .garcia {
                        margin-right: 5%;
                    }
                    
                    .garcia h1 {
                        font-size: 5.124450951683748vw;
                    }
                    
                    .garcia p {
                        font-size: 1.7569546120058566vw;
                    }
                    
                    .container {
                        width: 72% !important;
                        height: auto;
                        margin-top: 7% !important;
                        margin: auto;
                    }
                    
                    .sec-4 {
                        height: auto;
                        display: flex;
                        flex-wrap: wrap;
                        margin-top: 5%;
                        justify-content: space-around;
                    }
                    
                    .card-img {
                        text-align: center;
                        flex-basis: calc(33.33% - 10px);
                        position: relative;
                        margin: 5px;
                        width: 50%;
                        /* border: 3px solid black; */
                    }
                    
                    .image {
                        opacity: 1;
                        display: block;
                        width: 100%;
                        height: 40vh;
                        object-fit: cover;
                        transition: .5s ease;
                        backface-visibility: hidden;
                    }
                    
                    .middle {
                        width: 100%;
                        transition: .5s ease;
                        opacity: 0;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        -ms-transform: translate(-50%, -50%);
                        text-align: center;
                    }
                    
                    .card-img:hover .image {
                        opacity: 0.3;
                    }
                    
                    .card-img:hover .middle {
                        opacity: 1;
                    }
                    
                    .text {
                        color: white;
                        background-color: gray;
                        font-size: 1.171303074670571vw;
                        padding: 16px 32px;
                    }
                    
                    .portfolio {
                        font-size: 3.294289897510981vw;
                        margin-left: 15%;
                        margin-top: 5%;
                    }
                    
                    .portfolio-p {
                        color: #51f444;
                        margin-left: 15% !important;
                        font-size: 1.4641288433382138vw;
                    }
                    
                    #awsome-icon {
                        color: rgb(16, 16, 138);
                    }
                    
                    .sec-5 {
                        margin-top: 7%;
                    }
                    
                    .card {
                        background-color: black !important;
                        border: 1px solid white !important;
                    }
                    
                    .card h3 {
                        color: white;
                        font-size: 1.196193vw;
                    }
                    
                    .row {
                        width: 80%;
                        height: auto;
                        margin: auto !important;
                    }
                    
                    .topnav a {
                        margin-top: 15%;
                        float: left;
                        display: block;
                        color: #f2f2f2;
                        text-align: center;
                        padding: 14px 16px;
                        text-decoration: none;
                        font-size: 17px;
                    }
                    
                    .topnav .icon {
                        display: none;
                    }
                    
                    footer {
                        background-color: rgb(37, 34, 34);
                        color: #5460f2;
                        width: 100%;
                        height: auto;
                        margin: auto;
                        left: 0;
                        min-height: 200px;
                        bottom: 0;
                        padding: 10%;
                        margin-top: 15%;
                        font-size: larger;
                    }
                    
                    .footer p {
                        font-size: 1.0980966325036603vw !important;
                    }
                    
                    .phone {
                        display: flex;
                        align-items: center;
                    }
                    
                    .phone a:hover {
                        text-decoration: none;
                    }
                    
                    .phone i {
                        background: #51f444;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 30px;
                        width: 30px;
                        border-radius: 50%;
                        margin: 10px;
                    }
                    
                    .twitter {
                        width: 40px;
                        margin-top: -20%;
                    }
                    
                    @media screen and (max-width:720px) {
                        .sec-4 {
                            flex-direction: column;
                            width: fit-content;
                        }
                    }
                    
                    @media screen and (max-width: 600px) {
                        .image {
                            width: 100%;
                        }
                        .footer {
                            flex-direction: column;
                        }
                        .phone {
                            justify-content: left;
                        }
                        .twi-icon {
                            align-self: center;
                            border: none;
                            display: flex;
                        }
                        .twitter {
                            padding: 15%;
                        }
                        .card h3 {
                            font-size: 15px;
                        }
                    }
                    
                    @media screen and (max-width: 1014px) {
                        .dp-image img {
                            width: 300px;
                            height: 300px;
                        }
                    }
                    
                    @media screen and (max-width: 720px) {
                        .contact {
                            display: block !important;
                        }
                        .footer-wraper {
                            align-items: flex-start;
                        }
                        .imagdp-image img {
                            width: 200px;
                            height: 200px;
                        }
                    }
                    
                    @media screen and (max-width: 600px) {
                        .topnav a:not(:first-child) {
                            display: none;
                        }
                        .topnav a.icon {
                            float: right;
                            display: block;
                        }
                    }
                    
                    @media screen and (max-width: 600px) {
                        .sec-2 {
                            flex-direction: column;
                        }
                    }
                    
                    @media screen and (max-width: 600px) {
                        .garcia {
                            margin-top: 5%;
                        }
                    }
                    
                    @media screen and (max-width: 600px) {
                        .carousel-caption p {
                            margin-bottom: -1%;
                        }
                    }
                    
                    @media screen and (max-width: 600px) {
                        .topnav a:not(:first-child) {
                            display: none;
                        }
                        .topnav a.icon {
                            float: right;
                            display: block;
                        }
                    }
                    
                    @media screen and (max-width: 600px) {
                        .topnav.responsive {
                            position: relative;
                        }
                        .topnav.responsive .icon {
                            position: absolute;
                            right: 0;
                            top: 0;
                        }
                        .topnav.responsive a {
                            float: none;
                            display: block;
                            text-align: left;
                        }
                    }
                    
                    .slider {
                        margin-top: 20px;
                    }
                    
                    .project-details {
                        justify-content: center;
                        display: flex;
                        /* justify-content: space-around; */
                    }
                    
                    .project-details a {
                        background: #51f444;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 40px;
                        width: 40px;
                        border-radius: 50%;
                        margin: 0 5px;
                    }
                    
                    .project-details a:hover {
                        text-decoration: none;
                    }
                    
                    .footer-wraper {
                        display: flex;
                        justify-content: space-around;
                    }
                    
                    .contact {
                        display: flex;
                    }
                    
                    .social {
                        display: flex;
                    }
                    
                    .carousel-inner img {
                        width: 100%;
                        height: 80vh !important;
                        object-fit: cover !important;
                    }