* {
    box-sizing: border-box;
}

:root {
    --blue      : #3B82F6;
    --green     : #36CC52;
    --yellow    : #CAFE00;
    --input-bg  : #232327;
    --dark      : #1B1B1E;
    --darkest   : #000000;
}

hr {margin: 0px;}

body {
    margin: 0px;
    color: #777;
    background: #000;
}

a {text-decoration: none;}

* {outline: none;}

.container {
    background: var(--dark);
    max-width: 1000px;
    overflow: hidden;
    padding: 0px;
}

.name {
    font-size: 45px;
    font-weight: bold;
    font-family: 'Calibri';
} .name .myName {
    color: #FFF;
    cursor: pointer;
}

.headingLine {
    font-size: 34px;
    line-height: 1.2em;
    font-weight: bold;
    font-family: 'Arial';
    margin: 16px 0px;
    color: #AAA;
    background: -webkit-linear-gradient(var(--green), var(--yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

div.exp {
    color: #777;
}

a#contactMe {
    color: var(--darkest);
    background: #FFF;
    text-decoration: none;
    padding: 16px 45px;
    position: relative;
    z-index: 2;
}

.gradientShadow {
    color: var(--darkest);
    background: #FFF;
    text-decoration: none;
    padding: 16px 45px;
    position: relative;
    margin-left: 7px;
    background: linear-gradient(to right, var(--green), var(--yellow));
    z-index: 1;
    height: 56px;
}

.responsive_outer_padding {padding: 32px 16px;}
.gradientBorder {
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, var(--blue), var(--green), var(--yellow));
}

#trustedBy h2 {color: #FFF;}

.exp .d-grid .content {display: flex;align-items: center;padding: 5px 10px;gap: 5px;}
.exp .d-grid .content .numb {font-size: 30px;font-weight: bold;}
.exp .d-grid .content:nth-child(1) span.numb {color: var(--blue);}
.exp .d-grid .content:nth-child(2) span.numb {color: var(--green);}
.exp .d-grid .content:nth-child(3) span.numb {color: var(--yellow);}

.h1 {font-weight: bold;font-size: 32px;background: -webkit-linear-gradient(var(--green), var(--yellow)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;margin-bottom: 32px;}
.h2 {font-weight: bold;font-size: 20px;color: #FFF;}

.carx {
    background: #FFF;
}
.carx .head {
    padding: 24px;
    background: linear-gradient(135deg, var(--yellow), var(--green));
} .carx .head i.fa {
    font-size: 32px;
    color: #3B82F6;
} .carx .head .title {
    font-weight: bold;
    font-size: 23px;
    color: #000;
    line-height: 1em;
}

.carx .content {
    padding: 24px;
    font-size: 13px;
} .carx .content a {
    color: var(--blue);
    font-size: 17px;
}

#contactForm .title {
    color: #EFEFEF;
    background: #27272A;
    padding: 16px;
} #contactForm .content {
    color: #EFEFEF;
    padding: 16px;
} #contactForm input[type='text'] {
    background: var(--input-bg);
    border: 0px solid transparent;
    border-bottom: 1px solid #3B82F6;
    padding: 10px;
    color: #FFF;
}

#contactForm textarea {
    background: var(--input-bg);
    border: 0px solid transparent;
    border-bottom: 1px solid #3B82F6;
    padding: 10px;
    width: 100%;
    height: 100px;
    color: #FFF;
}

#contactForm input[type='button'] {
    color: var(--darkest);
    background: #FFF;
    text-decoration: none;
    padding: 7.5px 60px;
    position: relative;
    z-index: 2;
    border: 0px solid transparent;
}

#contactForm .bt-dashed {border-top: 1px dashed #3E3E45;}
#contactForm .bb-dashed {border-bottom: 1px dashed #3E3E45;}

.mb-64 {margin-bottom: 64px;}

.grid-2 {grid-template-columns: 1fr 1fr;}

#photoHolder {display: none;}

#header #myRate {
    z-index: 2;
    background: linear-gradient(to bottom, var(--blue), var(--green), var(--yellow));
    padding-left: 2px;
} #header #myRate #rate {
    background: var(--dark);
}

.top-link {
    transition: all .25s ease-in-out;
    position: fixed;
    bottom: 0;
    right: 0;
    display: inline-flex;
    
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin: 0 16px 16px 0;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 20px;
    background: -webkit-linear-gradient(var(--green), var(--yellow));
    color: #FFF;
}

@media(min-width: 1000px) {
    .container {margin: 64px auto;}
    
    .responsive_outer_padding {padding: 64px;}

    #header {grid-template-columns: 1fr 1fr;}
    #header .headingLine {font-size: 50px;}
    #header #myRate {width: 125%;background: linear-gradient(to right, var(--blue), var(--green), var(--yellow));padding-top: 2px;padding-left: 0px;}
    #header #myRate #rate {grid-template-columns: repeat(3, 1fr);}
    
    #header .name img {display: none;}
    
    .exp .d-grid .content {display: flex;align-items: center;padding: 10px;gap: 5px;}
    .exp .d-grid .content .numb {font-size: 50px;font-weight: bold;}

    #photoHolder {display: block;}
    #header img.bigsize {width: 100%;object-fit: cover;aspect-ratio: 2/3;border-radius: 10px;box-shadow: rgba(59, 130, 246, .7) 5px 5px;}

    #services {grid-template-columns: 1fr 2fr;}
    #services #services_detail {grid-template-columns: repeat(2, 1fr);}

    #contactFormHolder {grid-template-columns: 1fr 2fr;gap: 32px;}
    #contactFormHolder #contactForm #selectService {grid-template-columns: repeat(3, 1fr);}
    #contactFormHolder #contactForm #contactInfo {grid-template-columns: repeat(2, 1fr);}
}