/* ================ GOOGLE FONTS ============== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-straight/css/uicons-solid-straight.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-thin-straight/css/uicons-thin-straight.css');

/* ================ VARIABLES CSS ============= */
:root {
    --header-height: 4rem;

    /* ========= COLORS ======= */
    --body-color: #fff;
    --black-color: #000;
    --dark-bg-text-color: #e5e7eb;
    --text-gray-700: #364153;
    --text-slate-700: #314158;
    --active-text: #83c5be;

    /* ========== FONT AND TYPOGRAPHY =========*/
    --body-font: "Outfit", sans-serif;
    --biggest-font-size: 2.5rem;
    --bigger-font-size: 2rem;
    --big-font-size: 1.75rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;

    /* ========== FONT WEIGHT =========*/
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;

    /* ========== Z INDEX =========*/
    --z-tooltip: 10;
    --z-fixed: 100;
}

/* ================ RESPONSIVER TYPOGRAPHY ================ */
@media screen and (min-width: 1024px) {
    :root {
        --biggest-font-size: 3.5rem;
        --bigger-font-size: 2.25rem;
        --big-font-size: 2rem;
        --h1-font-size: 1.75rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;

        --header-height: 5.5rem
    }
}


/* ========== BASE ========= */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body,
button,
input {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    color: var(--text-color);
}

body {
    background-color: var(--body-color);
}

button,
input {
    outline: none;
    border: none;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}

/* ========== REUSABLE CSS ========= */
.main {
    overflow: hidden;
}

.section {
    padding-block: 3rem 1rem;
}

.container {
    max-width: 1120px;
    margin-inline: 1.5rem;
}

.flex {
    display: flex;
    flex-direction: column;
}

.grid {
    display: grid;
    gap: 1.5rem;
}

/* =========== HEADER ======= */
.header {
    width: 100%;
    position: fixed;
    z-index: var(--z-fixed);
    top: 0;
    left: 0;
    background-color: var(--body-color);
    border-bottom: 1px solid var(--dark-bg-text-color);
    transition: .5s;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}


.nav_logo {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-size: var(--h2-font-size);
    color: var(--text-slate-700);
}

.nav_btn,
.desk_i {
    display: none;
}

.nav_toggle,
.nav_close {
    cursor: pointer;
    font-size: var(--h1-font-size);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-slate-700);
    border-radius: 10px;
    transition: .5s;
}

.nav_toggle:hover,
.nav_close:hover {
    color: #0f766e;
    background-color: #99f6e39e;
}

@media screen and (max-width: 1150px) {
    .nav_menu {
        position: fixed;
        top: -100%;
        left: 0;
        width: 100%;
        background-color: var(--body-color);
        padding: 2rem;
        opacity: 0;
        transition: .5s;
    }
}

.show-menu {
    top: 0;
    opacity: 1;
}

.nav_list {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.nav_list li {
    width: 100%;
    padding: 0.5rem;
}

.nav_link {
    border-radius: 10px;
    color: var(--text-gray-700);
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-size: var(--h3-font-size);
    font-weight: var(--font-medium);
    transition: .5s;
    padding: 0.5rem;
}

.drop_list_link {
    border-radius: 10px;
    color: var(--text-gray-700);
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-weight: var(--font-medium);
    padding: 0.5rem;
    transition: .5s;
}

.nav_link:hover,
.drop_list_link:hover {
    color: #0f766e;
    background-color: #99f6e39e;
}

.drop_link {
    font-size: var(--normal-font-size);
    font-weight: var(--font-regular);
    color: var(--text-gray-700);
}

.nav_close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
}

/* ========= HOME ======== */
.home {
    background:
        repeating-linear-gradient(135deg,
            rgba(0, 0, 0, 0.025),
            rgba(0, 0, 0, 0.025) 1px,
            transparent 1px,
            transparent 18px),
        linear-gradient(135deg,
            #f7fcfd,
            #eef6f8);
    padding-top: 6rem;
    padding-bottom: 3rem;
}

.home_info {
    row-gap: 1.5rem;
}

.home_div {
    color: #364153;
    border: 1px solid #047857;
    border-radius: 10px;
    text-align: center;
    width: max-content;
    padding: 1.5rem;
    background: #059668;
    background: linear-gradient(90deg, rgba(5, 150, 104, 0.819) 0%, rgba(110, 231, 183, 0.3) 100%, rgba(255, 255, 255, 1) 50%);
}

.home_div h4 {
    font-size: var(--h3-font-size);
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.home_div p {
    font-weight: var(--font-medium);
}

.home_stars {
    font-size: var(--small-font-size);
    color: rgb(255, 184, 54);
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: .5rem;
}

.home_title {
    margin-top: 1rem;
}

.home_title h1 {
    font-size: var(--bigger-font-size);
    font-weight: 800;
    color: #036aa1d2;
    text-transform: uppercase;
    line-height: 2rem;
    margin-bottom: 0.5rem;
}

.home_title span {
    font-weight: var(--font-light);
    font-size: var(--h1-font-size);
}

.home_line {
    width: 6rem;
    height: 4px;
    background-color: #14b8a6;
    border-radius: 1.5rem;
    margin-bottom: 1rem;
}

.p_1 {
    font-size: var(--h2-font-size);
    font-weight: var(--font-light);
    color: var(--text-gray-700);
    margin-bottom: .5rem;
}

.p_1 span {
    font-weight: var(--font-medium);
    color: #14b8a6;
}

.p_2 {
    color: #78716c;
    font-size: var(--h2-font-size);
    font-weight: var(--font-light);
}

.home_grid {
    margin-top: 1rem;
    grid-template-columns: repeat(1, 1fr);
    row-gap: .5rem;
}

.home_li {
    cursor: pointer;
    transition: .5s;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    border: 1px solid #d4d4d4;
    font-size: var(--h3-font-size);
    color: #78716c;
    font-weight: var(--font-light);
    display: flex;
    align-items: center;
    column-gap: .5rem;
}

.home_li:hover {
    border-color: #0369a1;
    background-color: #f0f9ff;
}

.home_li:hover i {
    transform: scale(1.3);
}

.home_li i {
    padding-top: 0.3rem;
    color: #0369a1;
    font-size: var(--h1-font-size);
    transition: .5s;
}

.home_btns {
    row-gap: 1rem;
    align-items: center;
    justify-content: center;
}

.home_btns_1 {
    row-gap: 1rem;
    text-align: center;
}

.btn_1,
.btn_2 {
    padding: 1rem;
    font-size: var(--h2-font-size);
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: .5rem;
    width: 25rem;
    text-transform: uppercase;
    transition: .5s;
}

.btn_1 {
    background-color: #38bdf8;
    color: var(--body-color);
}

.btn_1:hover {
    box-shadow: rgba(147, 216, 254, 0.35) 0px 5px 15px;
}

.btn_2 {
    color: #78716c;
    font-weight: var(--font-light);
    border: 1px solid #bfdbfe;
}

.btn_2:hover {
    border-color: #0369a1;
    background-color: #f0f9ff;
}

.btn_2 i {
    color: #0369a1;
}

.btn_3 {
    padding: 1rem;
    color: var(--text-slate-700);
    font-size: var(--h3-font-size);
    display: flex;
    align-items: center;
    column-gap: .5rem;
    background-color: #e2e8f0;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    transition: .5s;
    border: 1px solid #e2e8f0;
}

.btn_3:hover {
    border: 1px solid #0369a1;
    background-color: #f0f9ff;
}

.map {
    color: red;
}

.arr1 {
    color: #38bdf8;
}

.home_img_div {
    row-gap: 1rem;
}

.home_img_div_1 {
    margin-top: 2rem;
    width: 100%;
    height: 400px;
    position: relative;
}

.home_img_div_1::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: #0000003c;
    width: 100%;
    height: 100%;
}

.home_img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

.img_sub {
    z-index: var(--z-tooltip);
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.5rem 1rem;
    background-color: #047857;
    color: var(--body-color);
    text-transform: uppercase;
}

.img_sub h4 {
    font-weight: var(--font-medium);
}

.img_text {
    color: var(--body-color);
    position: absolute;
    z-index: var(--z-tooltip);
    top: 50%;
    transform: translateY(-50%);
    left: 1rem;
    height: 10rem;
    display: flex;
    flex-direction: column;
    align-items: self-start;
}

.img_text h3 {
    font-size: var(--big-font-size);
}

.btn_4 {
    padding: 0.5rem 1rem;
    border-radius: 10px;
    background-color: var(--body-color);
    color: var(--text-gray-700);
    margin-top: 1rem;
    font-weight: var(--font-medium);
}

.home_flex {
    margin-block: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 3.5rem;
}

.home_data_flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home_data_flex h4 {
    font-size: var(--bigger-font-size);
    color: #364153;
    font-weight: 200;
}


.home_data_flex p {
    text-transform: uppercase;
    text-align: center;
    font-weight: var(--font-light);
    color: #78716c;
    font-size: var(--small-font-size);
}

.banner {
    background-color: #edf6f9;
    padding-block: 3rem;
}

.banner_container {
    background: #155E75;
    background: linear-gradient(90deg, rgba(21, 94, 117, 1) 0%, rgba(7, 89, 133, 0.5) 100%, rgba(8, 145, 178, 1) 50%);
    padding: 2rem;
    border-radius: 10px;
    row-gap: 1rem;
    color: var(--body-color);
}

.banner_text h3 {
    font-size: var(--h1-font-size);
}

.banner_text p {
    font-size: var(--h3-font-size);
}

.banner_btns {
    align-items: center;
    justify-content: center;
    row-gap: .5rem;
}

.banner_btn_1,
.banner_btn_2 {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: .5rem;
    font-size: var(--h2-font-size);
    padding: 1rem;
    font-weight: var(--font-medium);
    border-radius: 10px;
    width: 100%;
    cursor: pointer;
}

.banner_btn_1 {
    background-color: var(--body-color);
    color: #155E75;
    transition: .5s;
}

.banner_btn_1:hover {
    opacity: .8;
}

.banner_btn_2 {
    background-color: transparent;
    border: 2px solid var(--body-color);
}

/* =========== SERVICES ========= */
.services {
    background: #F9FAFB;
    background: linear-gradient(150deg, rgba(249, 250, 251, 1) 0%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 1) 50%);
    padding-block: 3rem;
}

.services_container {
    row-gap: 1.5rem;
}

.services_title,
.files_title,
.grids_title {
    text-align: center;
    align-items: center;
    justify-content: center;
}

.services_title h1,
.files_title h1,
.grids_title h1,
.cards_title h1,
.contact_title h1 {
    font-size: var(--h1-font-size);
    color: #155e75;
    font-weight: var(--font-semi-bold);
}

.services_title p,
.services_data_text p,
.files_title p,
.grids_title p,
.grids_data_1 p,
.grids_data_2 p,
.cards_title p,
.card_data p,
.contact_title p {
    color: #78716c;
}

.services_grid {
    grid-template-columns: repeat(1, 1fr);
}

.services_data {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    height: 250px;
    background-color: var(--body-color);
    padding: 1rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: .5s;
}

.services_data_text {
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
}

.services_data_text h4,
.grids_data_2 h3 {
    color: #155e75;
    font-size: var(--h3-font-size);
    font-weight: var(--font-medium);
}

.services_data_1 {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 10px;
    background-color: var(--body-color);
    padding: 1rem;
    border: 2px solid #ea580c;
    row-gap: .5rem;
    align-items: self-start;
    transition: .5s;
}

.services_data:hover,
.services_data_1:hover {
    cursor: pointer;
    transform: translateY(-.25rem);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.icon {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--body-color);
    font-size: var(--h1-font-size);
}

.icon_1 {
    background: #F97316;
    background: linear-gradient(150deg, rgba(249, 115, 22, 1) 0%, rgba(251, 146, 60, 1) 100%, rgba(253, 186, 116, 1) 50%);
}

.icon_2 {
    background: #2563EB;
    background: linear-gradient(150deg, rgba(37, 99, 235, 1) 0%, rgba(59, 130, 246, 1) 100%, rgba(96, 165, 250, 1) 50%);
}

.icon_3 {
    background: #16A34A;
    background: linear-gradient(150deg, rgba(22, 163, 74, 1) 0%, rgba(34, 197, 94, 1) 100%, rgba(74, 222, 128, 1) 50%);
}

.icon_4 {
    background: #9333EA;
    background: linear-gradient(150deg, rgba(147, 51, 234, 1) 0%, rgba(168, 85, 247, 1) 100%, rgba(192, 132, 252, 1) 50%);
}

.services_data_1 h4 {
    font-size: var(--h2-font-size);
    color: #0e7490;
}

.services_data_1 p {
    font-weight: var(--font-light);
    color: #78716c;
}

.grid_btn_1 {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    padding: .3rem .5rem;
    color: var(--body-color);
    background-color: #fd7d13;
    border-radius: 10px;
}

.grid_btn {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    color: #155e75;
    font-weight: var(--font-medium);
    font-size: var(--small-font-size);
}

/* ========== FİLES ========== */

.files {
    padding-block: 3rem;
    background: #EDE9FE;
    background: linear-gradient(150deg, rgba(237, 233, 254, 1) 0%, rgba(238, 242, 255, 1) 100%, rgba(238, 242, 255, 1) 50%);
}

.files_title {
    margin-bottom: 2rem;
}

.files_div {
    row-gap: 3rem;
}

.files_div_1 {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background-color: var(--body-color);
    padding: 1.5rem;
    border-radius: 10px;
    border: 2px solid #e0e7ff;
    transition: .5s;
}

.files_div_1:hover {
    border-color: #006d77;
}

.files_sub_title {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-size: var(--h2-font-size);
}

.files_sub_title i {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background: #155E75;
    background: linear-gradient(150deg, rgba(21, 94, 117, 1) 0%, rgba(238, 242, 255, 1) 100%, rgba(238, 242, 255, 1) 50%);
    color: var(--body-color);
    width: 50px;
    height: 50px;
    font-size: var(--h1-font-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.files_sub_title h3 {
    color: #155f75d8;
    font-weight: var(--font-semi-bold);
}

.files_grid {
    margin-top: 2rem;
    grid-template-columns: repeat(1, 1fr);
}

.files_data,
.files_div_3 {
    transition: .5s;
    cursor: pointer;
    border: 2px solid #e0e7ff;
    border-radius: 10px;
    padding: 1.5rem;
    background: #EDE9FE;
    background: linear-gradient(150deg, rgba(237, 233, 254, 1) 0%, rgba(238, 242, 255, 1) 100%, rgba(238, 242, 255, 1) 50%);
    display: flex;
    align-items: self-start;
    column-gap: 1rem;
}

.files_data:hover {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.files_data:hover .f_icon {
    transform: scale(1.05);
}

.files_data_text {
    width: 100%;
    display: flex;
    align-items: self-start;
    justify-content: space-between;
}

.f_icon,
.files_p_1 {
    background: #155E75;
    background: linear-gradient(150deg, rgba(21, 94, 117, 1) 0%, rgba(238, 242, 255, 1) 100%, rgba(238, 242, 255, 1) 50%);
    color: var(--body-color);
    width: 60px;
    height: 50px;
    font-size: var(--h1-font-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: .5s;
}

.c_icon {
    font-weight: var(--font-light);
    font-size: var(--h1-font-size);
    color: #34d399;
}

.files_data_info h4,
.files_div_title h3 {
    font-weight: var(--font-medium);
    font-size: var(--h3-font-size);
    color: #1f2937;
}

.files_data_info p,
.files_div_3 p {
    color: #78716c;
}

.idea_div {
    border-radius: 10px;
    border: 1px solid #14b8a6;
    background-color: #ccfbf1;
    margin-top: 2rem;
    padding: 1.5rem;
}

.idea_div i {
    color: rgb(255, 242, 0);
}

.idea_div span {
    font-weight: var(--font-semi-bold);
    color: #15803d;
}

.idea_div p {
    color: #166534;
    font-weight: var(--font-medium);
}

.files_relative {
    margin-top: 2rem;
    position: relative;
}

.files_line {
    position: absolute;
    top: 0;
    left: 1.35rem;
    width: 3px;
    height: 100%;
    background: #155E75;
    background: linear-gradient(150deg, rgba(21, 94, 117, 1) 0%, rgba(238, 242, 255, 1) 100%, rgba(238, 242, 255, 1) 50%);
}

.files_grid_1 {
    position: relative;
    grid-template-columns: repeat(1, 1fr);
}

.files_1_data {
    display: flex;
    align-items: self-start;
    justify-content: space-between;
    column-gap: 1rem;
}

.files_div_3 {
    flex-direction: column;
    width: 100%;
}

.files_div_title {
    margin-bottom: 1rem;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.files_div_title p {
    font-weight: var(--font-medium);
    font-size: var(--small-font-size);
    padding: 0.3rem 1rem;
    color: var(--body-color);
    background: #1D4ED8;
    background: linear-gradient(150deg, rgba(29, 78, 216, 1) 0%, rgba(239, 246, 255, 1) 100%, rgba(29, 78, 216, 1) 50%);
    border-radius: 2rem;
}

.files_p_1 {
    width: 60px;
    height: 50px;
}

.idea_div_1 i {
    color: rgb(162, 0, 0);
}

/* =========== GRİDS ========== */

.grids_sec {
    padding-block: 3rem;
    background: #DBEAFE;
    background: linear-gradient(150deg, rgba(219, 234, 254, 1) 0%, rgba(239, 246, 255, 1) 100%, rgba(255, 255, 255, 1) 50%);
}

.grids_grid_1 {
    margin-top: 2rem;
    grid-template-columns: repeat(2, 1fr);
}

.grids_data_1 {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 1.5rem;
    background-color: var(--body-color);
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--h2-font-size);
}

.grids_data_1 i {
    font-size: var(--bigger-font-size);
}

.grids_data_1 i,
.grids_data_1 h2 {
    color: #155E75;
}

.grids_grid_2 {
    margin-top: 4rem;
    grid-template-columns: repeat(1, 1fr);
}

.grids_data_2 {
    padding: 1rem;
    background-color: var(--body-color);
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    transition: .5s;
}

.grids_data_2 h3 {
    font-weight: var(--font-semi-bold);
    font-size: var(--h2-font-size);
}

.grids_data_2:hover {
    transform: translateY(-.25rem);
}

.grids_data_2_icon {
    color: #16a34a;
    font-size: var(--bigger-font-size);
    transition: .3s;
}

.grids_data_2_icon_2 {
    color: #2563eb;
}

.grids_data_2_icon_3 {
    color: #4f46e5;
}

.grids_data_2_icon_4 {
    color: #fbbf24;
}

.grids_data_2_icon_5 {
    color: #f97316;
}

.grids_data_2_icon_6 {
    color: #dc2626;
}

.grids_data_2_icon_7 {
    color: #0369a1;
}

.grids_data_2_icon_8 {
    color: #ec4899;
}

.grids_data_2:hover .grids_data_2_icon {
    transform: translateX(-.5rem);
    transform: scale(1.05);
}

.grids_banner,
.cards_banner {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: 10px;
    background: #155E75;
    background: linear-gradient(90deg, rgba(21, 94, 117, 1) 0%, rgba(7, 89, 133, 0.5) 100%, rgba(8, 145, 178, 1) 50%);
    align-items: center;
    row-gap: 1.5rem;
}

.grids_banner_title {
    text-align: center;
}

.grids_banner_title h1 {
    font-size: var(--big-font-size);
    color: var(--body-color);
}

.grids_banner_title p {
    color: #fafaf9;
}

.banner_group {
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    justify-content: center;
    text-align: center;
}

.banner_box {
    font-size: var(--h2-font-size);
}

.banner_box i {
    font-size: var(--biggest-font-size);
    color: var(--body-color);
}

.banner_box h4 {
    color: var(--body-color);
    font-weight: var(--font-medium);
}

.banner_box p {
    color: #f5f5f4;
    font-size: var(--normal-font-size);
}

/* ========= CARDS ======== */

.cards {
    padding-block: 3rem;
    background-color: #f3f4f6;
}

.cards_title {
    text-align: center;
}

.cards_grid {
    margin-top: 2rem;
    grid-template-columns: repeat(1, 1fr);
}

.card_data {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    row-gap: .5rem;
    padding: 2rem;
    border-radius: 10px;
    background-color: var(--body-color);
    transition: .5s;
}

.card_data:hover {
    transform: translateY(-.5rem);
}

.card_data:hover .card_icon {
    transform: scale(1.1);
}

.card_icon {
    background: #2563EB;
    background: radial-gradient(circle, rgba(37, 99, 235, 1) 0%, rgba(122, 173, 255, 1) 100%);
    color: var(--body-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: .5rem;
    border-radius: 10px;
    font-size: var(--bigger-font-size);
    transition: .5s;
}

.card_icon_2 {
    background: #15803D;
    background: radial-gradient(circle, rgba(21, 128, 61, 1) 0%, rgba(34, 197, 94, 1) 100%);
}

.card_icon_3 {
    background: #B91C1C;
    background: radial-gradient(circle, rgba(185, 28, 28, 1) 0%, rgba(230, 117, 117, 1) 100%);
}

.card_icon_4 {
    background: #EA580C;
    background: radial-gradient(circle, rgba(234, 88, 12, 1) 0%, rgba(249, 115, 22, 1) 100%);
}

.card_icon_5 {
    background: #7E22CE;
    background: radial-gradient(circle, rgba(126, 34, 206, 1) 0%, rgba(168, 85, 247, 1) 100%);
}

.card_icon_6 {
    background: #065F46;
    background: radial-gradient(circle, rgba(6, 95, 70, 1) 0%, rgba(5, 150, 105, 1) 100%);
}

.card_data h3 {
    font-size: var(--h2-font-size);
    color: #0891b2;
}

.card_data p {
    font-size: var(--h3-font-size);
}

.card_data_list li {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    color: #78716c;
}

.card_data_list li i {
    color: #047857;
    font-size: var(--h2-font-size);
}

.card_data_btn {
    padding: 1rem;
    background-color: #dbeafe;
    border-radius: 10px;
    text-align: center;
    color: #0c4a6e;
    font-size: var(--h2-font-size);
    font-weight: var(--font-medium);
    margin-top: 0.5rem;
    transition: .5s;
}

.card_data_btn:hover {
    background-color: #0c4a6e;
    color: var(--body-color);
}

.cards_banner {
    text-align: center;
    margin-bottom: 2rem;
}

.cards_banner_title h3 {
    font-size: var(--h1-font-size);
    color: var(--body-color);
}

.cards_banner_title p {
    color: #DBEAFE;
}

.cards_banner_btns {
    width: 100%;
    row-gap: 1rem;
}

.card_btn_1 {
    color: #0c4a6e;
    background-color: var(--body-color);
    padding: 0.5rem;
    border-radius: 10px;
    font-size: var(--h2-font-size);
    font-weight: var(--font-medium);
    transition: .5s;
}

.card_btn_2 {
    transition: .5s;
    padding: 0.5rem;
    border-radius: 10px;
    font-size: var(--h2-font-size);
    font-weight: var(--font-medium);
    color: var(--body-color);
    border: 2px solid var(--body-color);
}

.card_btn_1:hover,
.card_btn_2:hover {
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    transform: scale(1.05);
}

/* ========== CONTACT ========= */
.contact {
    padding-block: 3rem;
    background: #f2fbff;
    background: linear-gradient(145deg, rgba(242, 251, 255, 1) 0%, rgba(240, 249, 255, 1) 50%, rgba(240, 249, 255, 1) 100%);
}

.contact_title {
    text-align: center;
}

.contact_title h1 {
    font-size: var(--bigger-font-size);
}

.contact_div {
    margin-top: 2rem;
    row-gap: 1.5rem;
}

.contact_div_1 {
    row-gap: 1rem;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 1.5rem;
    background-color: var(--body-color);
    border-radius: 10px;
}

.contact_div_1 h3 {
    font-size: var(--h1-font-size);
    color: #155e75;
}

.contact_form {
    row-gap: 1rem;
}

.form_div {
    row-gap: 1rem;
}

.form_div_1 {
    row-gap: .5rem;
}

.form_div_1 label {
    color: #1f2937;
}

.form_div_1 input,
.form_div_1 textarea {
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid #e5e7eb;
}

.contact_btn {
    padding: 1rem;
    text-align: center;
    background-color: #155e75;
    color: var(--body-color);
    font-weight: var(--font-medium);
    border-radius: 10px;
    transition: .5s;
}

.contact_btn:hover {
    opacity: .8;
    transform: translateY(-.25rem);
}

.contact_div_2 {
    row-gap: 1.5rem;
}

.contact_tel {
    transition: .5s;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 2rem;
    background-color: var(--body-color);
    border-radius: 10px;
    display: flex;
    align-items: self-start;
    column-gap: 1rem;
}

.contact_tel:hover {
    transform: translateY(-.25rem);
}

.contact_tel_icon {
    color: #047857;
    font-size: var(--h1-font-size);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: #f3f4f6;
}

.contact_tel_info h4 {
    color: #155e75;
}

.contact_tel_icon_1 {
    color: #B91C1C;
}

.contact_hour {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 2rem;
    background: #155E75;
    background: linear-gradient(90deg, rgba(21, 94, 117, 1) 0%, rgba(7, 89, 133, 0.5) 100%, rgba(8, 145, 178, 1) 50%);
    border-radius: 10px;
}

.contact_hour h3 {
    color: var(--body-color);
    margin-bottom: 0.5rem;
}

.contact_days {
    display: grid;
    row-gap: .5rem;
}

.contact_day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--body-color);
    font-size: var(--h3-font-size);
}

.contact_day span {
    color: #e5e7eb;
}

.contact_day .span {
    color: hsl(0, 100%, 54%);
}

/* ========= FOOTER ======== */
.footer {
    padding-block: 3rem;
    background: #e6fbff;
    background: linear-gradient(145deg, rgba(230, 251, 255, 1) 0%, rgba(59, 130, 246, 1) 100%, rgba(21, 94, 117, 1) 73%);
}

.footer_grid {
    grid-template-columns: repeat(1, 1fr);
}

.footer_data {
    row-gap: .5rem;
}

.footer_logo {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-size: var(--big-font-size);
    color: #1f2937;
}

.footer_data p {
    color: var(--text-gray-700);
    font-size: var(--h3-font-size);
}

.footer_div {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    background-color: #f3f4f6;
    padding: 1rem;
    border-radius: 10px;
}

.footer_div i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--h2-font-size);
    border-radius: 10px;
}

.footer_i_1 {
    color: #065F46;
    background-color: #67ffd470;
}

.footer_i_2 {
    color: #0c4a6e;
    background-color: #b4e4ff65;
}

.footer_div p {
    color: var(--text-gray-700);
    font-weight: var(--font-medium);
}

.footer_data_1 h2 {
    color: var(--text-gray-700);
    margin-bottom: 1rem;
}

.footer_list {
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
    color: #6b7280;
    font-weight: var(--font-medium);
}

.footer_list li:hover {
    color: var(--black-color);
    text-decoration: underline;
    cursor: pointer;
}

.footer_list_1 {
    margin-bottom: 1rem;
}

.footer_data_1 h3 {
    color: var(--text-gray-700);
    font-weight: var(--font-medium);
}

.footer_social {
    display: flex;
    align-items: center;
    column-gap: 1.5rem;
    margin-block: .5rem;
}

.footer_social i {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--body-color);
    font-size: var(--h1-font-size);
    border-radius: 10px;
}

.footer_social_1 {
    color: #db2777;
}

.footer_social_2 {
    color: #22c55e;
}

.footer_copy {
    border-top: 1px solid #fafaf9;
    border-bottom: 1px solid #fafaf9;
    margin-block: 2rem;
    padding: 1.5rem;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.footer_copy h3 {
    font-weight: var(--font-regular);
    color: var(--text-slate-700);
    font-size: var(--h3-font-size);
}

.footer_sec {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    column-gap: 1.5rem;
}

.footer_sec a {
    color: #6b7280;
    font-weight: var(--font-light);
}

.footer_me {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--smaller-font-size);
    color: #d6d3d1;
    font-weight: var(--font-light);
}

@media screen and (min-width: 1150px) {

    .container {
        max-width: 1720px;
        margin-inline: 8rem;
    }

    .nav_close,
    .nav_toggle {
        display: none;
    }

    .nav_btn {
        cursor: pointer;
        display: flex;
        align-items: center;
        column-gap: .5rem;
        font-size: var(--h3-font-size);
        color: var(--body-color);
        background-color: #0c4a6e;
        padding: 0.5rem 1rem;
        border-radius: 10px;
        transition: .5s;
    }

    .nav_btn:hover {
        background-color: #0c4a6ed3;
    }

    .nav_list {
        flex-direction: row;
        align-items: center;
        column-gap: 1.5rem;
        margin-top: 0;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .nav_list li {
        padding: 0;
        width: max-content;
    }

    .nav_link,
    .drop_list_link {
        font-size: var(--normal-font-size);
    }

    .drop_li {
        position: relative;
    }

    .drop_link {
        font-weight: var(--font-medium);
        position: relative;
        display: flex;
        align-items: center;
        column-gap: .5rem;
        padding: .5rem;
        border-radius: 10px;
        cursor: pointer;
        transition: .5s;
    }

    .drop_link:hover {
        color: #0f766e;
        background-color: #99f6e39e;
    }

    .drop_list {
        position: absolute;
        left: 50%;
        top: calc(100% + 12px);
        transform: translateX(-50%) translateY(-8px);
        display: flex;
        flex-direction: column;
        row-gap: .5rem;

        padding: 1.5rem;
        border-radius: 1.5rem;
        background: #fff;
        box-shadow: rgba(0, 0, 0, .02) 0 1px 3px 0,
            rgba(27, 31, 35, .15) 0 0 0 1px;
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    }

    .drop_li:hover .drop_list {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    .drop_li .arr {
        transition: transform .22s ease;
    }

    .drop_li:hover .arr {
        transform: rotate(180deg);
    }

    .drop_list::before {
        content: "";
        position: absolute;
        left: 0;
        top: -12px;
        width: 100%;
        height: 12px;
    }

    .desk_i {
        display: block;
    }

    .home_container {
        flex-direction: row;
        align-items: center;
        column-gap: 3rem;
    }

    .home_info {
        width: 700px;
    }

    .home_title h1 {
        font-size: var(--biggest-font-size);
        line-height: 3rem;
    }

    .home_img_div {
        flex-basis: 50%;
    }

    .home_btns_1 {
        flex-direction: row;
        column-gap: 2rem;
    }

    .btn_1,
    .btn_2 {
        width: 20rem;
    }

    .home_grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 1.5rem;
    }

    .banner_container {
        flex-direction: row;
        column-gap: 2rem;
        max-width: 1000px;
        margin-inline: auto;
    }

    .banner_btns {
        flex-direction: row;
        column-gap: 1rem;
    }

    .banner_btn_1,
    .banner_btn_2 {
        font-size: var(--h3-font-size);
        width: max-content;
        padding: 0.5rem 1rem;
    }

    .services_title h1,
    .files_title h1,
    .grids_title h1,
    .cards_title h1,
    .contact_title h1 {
        font-size: var(--biggest-font-size);
        font-weight: var(--font-semi-bold);
        line-height: 4rem;
    }

    .services_grid,
    .banner_group,
    .cards_grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .services_data_1 {
        grid-column: 1 / span 2;
    }

    .files_div {
        column-gap: 3rem;
        flex-direction: row;
    }

    .grids_grid_1,
    .grids_grid_2 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grids_data_2 h3 {
        font-size: var(--h3-font-size);
    }

    .card_data {
        row-gap: 1rem;
    }

    .card_data p {
        font-size: var(--normal-font-size);
    }

    .card_data_btn {
        font-size: var(--h3-font-size);
        padding: .5rem;
    }

    .cards_banner_btns {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        column-gap: 1.5rem;
    }

    .card_btn_1,
    .card_btn_2 {
        width: 15rem;
    }

    .contact_div {
        flex-direction: row;
        column-gap: 4rem;
    }

    .contact_div_1,
    .contact_div_2 {
        width: 50%;
    }

    .form_div {
        flex-direction: row;
        column-gap: 2rem;
    }

    .form_div_1 {
        width: 100%;
    }

    .footer_grid {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 5rem;
    }

    .footer_div p,
    .footer_data p {
        font-size: var(--normal-font-size);
    }
}

@media screen and (min-width: 1914px) {
    .container {
        max-width: 1919px;
        margin-inline: 10rem;
    }
}

@media screen and (max-width : 415px) {
    .home_data_flex h4 {
        font-size: var(--big-font-size);
    }
}