@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ewert&display=swap');

:root {
    --font-1: "DM Sans", sans-serif;
    --font-2: "Exo 2", sans-serif;
    --font-3: "Ewert", serif;
    
    --color-w: #fff;
    --color-b: #000;
    --color-444: #444;
    
    --color-1a: #012728;
    --color-1: #01191d;
    
    --color-2: #004d41;
    --color-3: #031f25;
    --color-4: #f8f8f8;
    --color-5: #f47e1e;
    --color-6: #004d41;
    --color-7: #1b3034;
    --color-8: #43585c;
    --color-9: #f6fbfa;
    --color-10: #273a3f;
    --color-11: #004D4194;
    --color-12: #01181d;
    --color-13: #02101e;
    
    
    

    --s-13: 13px;
    --s-14: 14px;
    --s-15: 15px;
    --s-16: 16px;
    --s-17: 17px;
    --s-18: 18px;
    --s-20: 20px;
    --s-21: 21px;
    --s-22: 22px;
    --s-25: 25px;
    --s-26: 26px;
    --s-28: 28px;
    --s-30: 30px;
    --s-40: 40px;
    --s-50: 50px;
    --s-70: 70px;
    
    --fontWeight-1: 100;
    --fontWeight-2: 200;
    --fontWeight-3: 300;
    --fontWeight-4: 400;
    --fontWeight-5: 500;
    --fontWeight-6: 600;
    --fontWeight-7: 700;
}

body {
    overflow-x: hidden;
    font-family: var(--font-1);
}
a {
    text-decoration: none;
}
a,span {
    display: inline-block;
}
h1 {
    font-family: var(--font-2);
}
h2 {
    font-family: var(--font-2);
    text-transform: capitalize;
    color: var(--color-w);
    font-size: var(--s-40);
    font-weight: 700;
    line-height: 1.4;
}
.relative {
    position: relative!important;
}
.appear {
    position: relative;
    bottom: -150px;
    opacity: 0;
    transition: all 1s;
}
.appear.active {
    bottom: 0px;
    opacity: 1;
    transition: all 1s;
}
.title-box {
    text-align: center;
}




/*////////////////////////////////particles*/
/* ---- reset ---- */ 

canvas{ 
    display: block; 
    vertical-align: bottom; 
} 

/* ---- particles.js container ---- */ 
#particles-js{ 
    position:absolute;
    width: 100%; 
    height: 100%; 
    background: linear-gradient(180deg, #01191d, #012e2b, #01181d);
    background-image: url(""); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: 50% 50%; 
} 

/* ---- stats.js ---- */ 
.count-particles{ 
    background: #000022; 
    position: absolute; 
    top: 48px; 
    left: 0; 
    width: 80px; 
    color: #13E8E9; 
    font-size: .8em; 
    text-align: left; 
    text-indent: 4px; 
    line-height: 14px; 
    padding-bottom: 2px; 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: bold; } 
.js-count-particles{ 
    font-size: 1.1em; 
} 
#stats, .count-particles{ 
    -webkit-user-select: none; 
    margin-top: 5px; 
    margin-left: 5px; 
} 
#stats{ 
    border-radius: 3px 3px 0 0; 
    overflow: hidden; 
} 
.count-particles{ 
    border-radius: 0 0 3px 3px; 
}
/*////////////////////////////////particles-END*/

.loader-left,
.loader-right {
    position: fixed;
    background: var(--color-b);
    width: 50%;
    height: 100vh;
    z-index: 300;
    top: 0;
    animation-name: loader;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    opacity: 1;
}

.loader-left {
    border-right: 3px solid var(--color-2);
    left: 0;
}
.loader-right {
    border-left: 3px solid var(--color-2);
    right: 0;
}





.marginB {
    margin-bottom: 3rem !important;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' class='bi bi-list' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E");
    width: 40px;
    height: 40px;
}
.navbar-toggler-icon.open {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' class='bi bi-x' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 4.646a.5.5 0 011-.707L8 6.293l2.354-2.354a.5.5 0 01.707.707L8.707 7l2.354 2.354a.5.5 0 01-.707.707L8 7.707l-2.354 2.354a.5.5 0 01-.707-.707L7.293 7 4.646 4.646z'/%3E%3C/svg%3E");
    width: 40px;
    height: 40px;
}
.image_icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'/%3E%3Cpath d='M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}
.btn1 {
    font-size: var(--s-18);
    margin-left: 15px;
    font-weight: 500;
    border-radius: 30px;
    padding: 13px 25px;
    background: var(--color-2);
    color: var(--color-w);
    text-transform: capitalize;
    transition: 0.6s all;
}
.btn1:hover {
    background: var(--color-3);
    color: var(--color-w);
    transition: 0.6s all;
}

.btn2 {
    color: var(--color-w);
    font-size: var(--s-16);
    font-weight: 500;
    border-style: none;
    border: 1px solid var(--color-2);
    border-radius: 5px;
    margin: 16px 0 0;
    padding: 10px 30px;
    background-color: #FFFFFF00;
    transition: 0.6s all;
}
.btn2:hover {
    background-color: var(--color-2);
    transition: 0.6s all;
}
/*-----------------------TOP------------------------*/



/*-----------------------NAV------------------------*/
.navbar {
    position: sticky;
    background-color: var(--color-1);
    top: 0;
    left: 0;
    z-index: 110;
}
.sticker {
    position: sticky;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 110;
    transition: all 0.6s;
}
.navbar .navbar-brand {
    color: var(--color-w);
    font-family: var(--font-3);
    font-weight: 400;
    font-size: 30px;
}
.navbar .navbar-collapse {
    justify-content: flex-end;
}
.navbar .navbar-nav .nav-item a {
    position: relative;
    margin: 38px 20px;
    font-size: var(--s-17);
    font-weight: 500;
    color: var(--color-w);
}

/*----------------------HEADER----------------------*/
header {
    position: relative;
    background: linear-gradient(180deg, #01191d, #012e2b, #01181d);
    /*height: 100vh;*/
}
header .info-box {
    position: relative;
    padding-top: 180px;
}
header .info-box .intro {
    color: var(--color-w);
    text-transform: uppercase;
    font-size: var(--s-28);
    font-weight: 700;
    padding: 0 0 22px 0;
}
header .info-box h1 {
    font-size: var(--s-70);
    font-weight: 700;
    line-height: 1.2;
    color: transparent;
    min-height: 90px; /* Dostosuj wysokość w zależności od treści */
    -webkit-text-stroke: 1px var(--color-w); /* Adds the white border */
}
header .info-box ul {
    display: flex;
    margin-left: 23px;
    padding: 25px 0px 0px;
    list-style: none;
}
header .info-box ul li {
    position: relative;
    color: var(--color-w);
    font-size: var(--s-14);
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 55px;
    white-space: nowrap;
}
header .info-box ul li::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -27px;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background: white;
}
header .info-box .social-box {
    margin-top: 45px;
    display: flex;
}
header .info-box .social-box a {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: 1px solid #666;
    width: 41px;
    height: 41px;
    margin-right: 5px;
    transition: 0.6s all;
}
header .info-box .social-box a:hover {
    background: white;
    border: 1px solid white;
    transition: 0.6s all;
}
header .info-box .social-box a span {
    position: relative;
    width: 14px;
    height: 14px;
    transition: 0.6s all;
}
header .info-box .social-box a:hover span {
    transition: 0.6s all;
}
header .info-box .social-box a .fb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951'/%3E%3C/svg%3E");
}
header .info-box .social-box a .sk {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M4.671 0c.88 0 1.733.247 2.468.702a7.42 7.42 0 0 1 6.02 2.118 7.37 7.37 0 0 1 2.167 5.215q0 .517-.072 1.026a4.66 4.66 0 0 1 .6 2.281 4.64 4.64 0 0 1-1.37 3.294A4.67 4.67 0 0 1 11.18 16c-.84 0-1.658-.226-2.37-.644a7.42 7.42 0 0 1-6.114-2.107A7.37 7.37 0 0 1 .529 8.035q0-.545.08-1.081a4.644 4.644 0 0 1 .76-5.59A4.68 4.68 0 0 1 4.67 0zm.447 7.01c.18.309.43.572.729.769a7 7 0 0 0 1.257.653q.737.308 1.145.523c.229.112.437.264.615.448.135.142.21.331.21.528a.87.87 0 0 1-.335.723c-.291.196-.64.289-.99.264a2.6 2.6 0 0 1-1.048-.206 11 11 0 0 1-.532-.253 1.3 1.3 0 0 0-.587-.15.72.72 0 0 0-.501.176.63.63 0 0 0-.195.491.8.8 0 0 0 .148.482 1.2 1.2 0 0 0 .456.354 5.1 5.1 0 0 0 2.212.419 4.6 4.6 0 0 0 1.624-.265 2.3 2.3 0 0 0 1.08-.801c.267-.39.402-.855.386-1.327a2.1 2.1 0 0 0-.279-1.101 2.5 2.5 0 0 0-.772-.792A7 7 0 0 0 8.486 7.3a1 1 0 0 0-.145-.058 18 18 0 0 1-1.013-.447 1.8 1.8 0 0 1-.54-.387.73.73 0 0 1-.2-.508.8.8 0 0 1 .385-.723 1.76 1.76 0 0 1 .968-.247c.26-.003.52.03.772.096q.412.119.802.293c.105.049.22.075.336.076a.6.6 0 0 0 .453-.19.7.7 0 0 0 .18-.496.72.72 0 0 0-.17-.476 1.4 1.4 0 0 0-.556-.354 3.7 3.7 0 0 0-.708-.183 6 6 0 0 0-1.022-.078 4.5 4.5 0 0 0-1.536.258 2.7 2.7 0 0 0-1.174.784 1.9 1.9 0 0 0-.45 1.287c-.01.37.076.736.25 1.063'/%3E%3C/svg%3E");
}
header .info-box .social-box a .is {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334'/%3E%3C/svg%3E");
}
header .info-box .social-box a .xx {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z'/%3E%3C/svg%3E");
}


header .info-box .social-box a:hover .fb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951'/%3E%3C/svg%3E");
}
header .info-box .social-box a:hover .sk {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M4.671 0c.88 0 1.733.247 2.468.702a7.42 7.42 0 0 1 6.02 2.118 7.37 7.37 0 0 1 2.167 5.215q0 .517-.072 1.026a4.66 4.66 0 0 1 .6 2.281 4.64 4.64 0 0 1-1.37 3.294A4.67 4.67 0 0 1 11.18 16c-.84 0-1.658-.226-2.37-.644a7.42 7.42 0 0 1-6.114-2.107A7.37 7.37 0 0 1 .529 8.035q0-.545.08-1.081a4.644 4.644 0 0 1 .76-5.59A4.68 4.68 0 0 1 4.67 0zm.447 7.01c.18.309.43.572.729.769a7 7 0 0 0 1.257.653q.737.308 1.145.523c.229.112.437.264.615.448.135.142.21.331.21.528a.87.87 0 0 1-.335.723c-.291.196-.64.289-.99.264a2.6 2.6 0 0 1-1.048-.206 11 11 0 0 1-.532-.253 1.3 1.3 0 0 0-.587-.15.72.72 0 0 0-.501.176.63.63 0 0 0-.195.491.8.8 0 0 0 .148.482 1.2 1.2 0 0 0 .456.354 5.1 5.1 0 0 0 2.212.419 4.6 4.6 0 0 0 1.624-.265 2.3 2.3 0 0 0 1.08-.801c.267-.39.402-.855.386-1.327a2.1 2.1 0 0 0-.279-1.101 2.5 2.5 0 0 0-.772-.792A7 7 0 0 0 8.486 7.3a1 1 0 0 0-.145-.058 18 18 0 0 1-1.013-.447 1.8 1.8 0 0 1-.54-.387.73.73 0 0 1-.2-.508.8.8 0 0 1 .385-.723 1.76 1.76 0 0 1 .968-.247c.26-.003.52.03.772.096q.412.119.802.293c.105.049.22.075.336.076a.6.6 0 0 0 .453-.19.7.7 0 0 0 .18-.496.72.72 0 0 0-.17-.476 1.4 1.4 0 0 0-.556-.354 3.7 3.7 0 0 0-.708-.183 6 6 0 0 0-1.022-.078 4.5 4.5 0 0 0-1.536.258 2.7 2.7 0 0 0-1.174.784 1.9 1.9 0 0 0-.45 1.287c-.01.37.076.736.25 1.063'/%3E%3C/svg%3E");
}
header .info-box .social-box a:hover .is {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334'/%3E%3C/svg%3E");
}
header .info-box .social-box a:hover .xx {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z'/%3E%3C/svg%3E");
}


header .foto-box {
    position: relative;
    top: -100px;
}
header .foto-box img {
    width: 100%;
    height: auto;
    max-height: 700px;
}






/*-----------------------SEC1-----------------------*/
.sec1 {
    background: var(--color-1);
}
.sec1 .title-box {
    margin-bottom: 52px;
}
.sec1 .box {
    min-height: 204px;
}
.sec1 .box {
    border: 1px solid var(--color-7);
    padding: 40px 30px 40px 40px;
    border-radius: 10px;
    transition: 0.6s all;
}
.sec1 .box:hover {
    background: var(--color-6);
    transition: 0.6s all;
}
.sec1 .box .content-box {
    display: flex;
}
.sec1 .box .content-box .icon-box {
    
}
.sec1 .box .content-box .icon-box span {
    position: relative;
    width: 50px;
    height: 50px;
    margin-top: 10px;
    margin-right: 30px;
}
.sec1 .box .content-box .icon-box .basket {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1v4.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 13.5V9a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h1.217L5.07 1.243a.5.5 0 0 1 .686-.172zM2 9v4.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V9zM1 7v1h14V7zm3 3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 4 10m2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 6 10m2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 8 10m2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5m2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
}
.sec1 .box .content-box .icon-box .code {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8z'/%3E%3C/svg%3E");
}
.sec1 .box .content-box .icon-box .solve {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3q0-.405-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708M3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z'/%3E%3C/svg%3E");
}
.sec1 .box .content-box .icon-box .mobile {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");
}
.sec1 .box .content-box .icon-box .layout {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M13 6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5m0 3a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5m-.5 2.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1z'/%3E%3Cpath d='M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zM2 1a1 1 0 0 0-1 1v1h14V2a1 1 0 0 0-1-1zM1 4v10a1 1 0 0 0 1 1h2V4zm4 0v11h9a1 1 0 0 0 1-1V4z'/%3E%3C/svg%3E");
}
.sec1 .box .content-box .icon-box .web {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z'/%3E%3C/svg%3E");
}


.sec1 .box .content-box .info-box {
    
}
.sec1 .box .content-box .info-box h3 {
    font-family: var(--font-2);
    font-size: var(--s-20);
    font-weight: 700;
    color: var(--color-w);
    text-transform: uppercase;
    margin-bottom: 8px;
    line-height: 1.2;
}
.sec1 .box .content-box .info-box p {
    color: var(--color-w);
    font-size: var(--s-16);
}

/*-----------------------SEC2-----------------------*/
.sec2 {
    background: var(--color-1);
    padding: 32px 0 30px;
}
.sec2 .box {
    color: var(--color-w);
    background: var(--color-3);
    border-radius: 10px;
    padding: 60px 40px 35px;
}
.sec2 .box .progress-box {
    position: relative;
    padding-right: 70px;
    margin-bottom: 35px;
}
.sec2 .box .progress-box h3 {
    color: var(--color-w);
    font-weight: 400;
    font-size: var(--s-16);
}
.sec2 .box .progress-box .progress-source {
    position: relative;
    height: 3px;
    border-radius: 0;
    margin-top: 5px;
    background: var(--color-8);
    overflow: visible;
}
.sec2 .box .progress-box .progress-source .progress {
    background: var(--color-w);
    width: 0%;
    height: 3px;
    z-index: 3;
}
.proc-90 {
    animation-name: anim-90;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
.proc-86 {
    animation-name: anim-86;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
.proc-75 {
    animation-name: anim-75;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
.proc-71 {
    animation-name: anim-71;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
.proc-68 {
    animation-name: anim-68;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
.proc-72 {
    animation-name: anim-72;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

.sec2 .box .progress-box .progress-source span {
    position: absolute;
    top: -27px;
    right: 10px;
}


/*--------------------sec3-portfolio-------------------*/
.sec3-portfolio {
    background: var(--color-1);
    padding: 62px 0 30px;
}


.sec3-portfolio .swiper {
    width: 100%;
    padding: 110px 0;
}
.sec3-portfolio .swiper .swiper-slide {
    position: relative;
    width: 300px;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
}

.sec3-portfolio .swiper .swiper-slide .box {
    position: relative;
    box-shadow: 0 0 4px 0 rgba(0,0,0,.05);
    background: var(--color-3);
}



.sec3-portfolio .swiper .swiper-slide .box img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: inherit;
    user-select: none;
}
.sec3-portfolio .swiper .swiper-slide .box .title {
    padding: 20px 30px 30px;
}
.sec3-portfolio .swiper .swiper-slide .box .title h2 {
    margin: 5px 0 0;
    color: var(--color-w);
    font-size: var(--s-21);
}
.sec3-portfolio .swiper .swiper-slide .box .title p {
    margin: 0;
    padding: 18px 0px 10px 0px;
    color: var(--color-w);
    font-size: var(--s-16);
}

.swiper-slide-active .title {
    bottom: -10px;
    box-shadow: 0 20px 30px 2px rgba(0, 77, 65, 0.58)
}
.swiper-pagination {
    --swiper-pagination-bottom: -6px;
}





/*-----------------------SEC4-----------------------*/
.sec4 {
    background: var(--color-1);
    padding: 62px 0 140px;
}
.sec4 .title-box {
        margin-bottom: 53px;
    }
.sec4 .big-box .edu_box {
    position: relative;
    display: flex;
    justify-content: space-between
}
.sec4 .big-box .edu_box::before {
    content: "";
    position: absolute;
    background: var(--color-10);
    left: 50%;
    top: 0;
    width: 3px;
    height: 100%;
}


/*/////////////////////LEFT////////////////////*/
.sec4 .big-box .edu_box .l-site,
.sec4 .big-box .edu_box .r-site {
    position: relative;
    width: 50%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
}



/*//////////CIRCLE//////////*/
.sec4 .big-box .edu_box .l-site .box-around {
    position: relative;
    right: -56px;
}
.sec4 .big-box .edu_box .l-site .box-around .bg-around, 
.sec4 .big-box .edu_box .r-site .box-around .bg-around {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    border-radius: 100%;
    color: var(--color-w);
    background: var(--color-2);
    transition: 0.6s;
}
.sec4 .big-box .edu_box .l-site .box-around .bg-around .edu-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783'/%3E%3C/svg%3E");
    width: 40px;
    height: 40px;
}
/*////////END-CIRCLE/////////*/




.sec4 .big-box .edu_box .l-site .box-info,
.sec4 .big-box .edu_box .r-site .box-info {
    position: relative;
    background: var(--color-3);
    padding: 65px 40px 50px 40px;
    border-radius: 10px;
    box-shadow: 0 0 97px rgb(0 0 0 / 10%);
    transition: 0.6s all;
}
.sec4 .big-box .edu_box .l-site .box-info::before,
.sec4 .big-box .edu_box .r-site .box-info::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 100%;
    width: 40px;
    height: 40px;
    border-top: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid var(--color-3);
    transform: translateY(-50%);
    transition: 0.6s all;
}
.sec4 .big-box .edu_box:hover .l-site .box-info::before {
    border-left: 40px solid var(--color-11);
    transition: 0.6s all;
}
.sec4 .big-box .edu_box:hover .l-site .box-info,
.sec4 .big-box .edu_box:hover .r-site .box-info,
.sec4 .big-box .edu_box:hover .box-around .bg-around {
    background: var(--color-11);
    transition: 0.6s all;
}

.sec4 .big-box .edu_box .l-site .box-info .box-row-top,
.sec4 .big-box .edu_box .l-site .box-info .box-row,
.sec4 .big-box .edu_box .r-site .box-info .box-row-top,
.sec4 .big-box .edu_box .r-site .box-info .box-row {
    text-align: left;
}
.sec4 .big-box .edu_box .l-site .box-info .box-row-top h3,
.sec4 .big-box .edu_box .r-site .box-info .box-row-top h3 {
    font-family: var(--font-2);
    color: var(--color-w);
    line-height: 1.2;
    font-weight: 700;
    font-size: var(--s-20);
    text-transform: uppercase;
}
.sec4 .big-box .edu_box .l-site .box-info .box-row-top p,
.sec4 .big-box .edu_box .r-site .box-info .box-row-top p {
    color: var(--color-w);
    padding: 15px 0 10px;
}

.sec4 .big-box .edu_box .l-site .box-info .box-row h3,
.sec4 .big-box .edu_box .r-site .box-info .box-row h3 {
    font-family: var(--font-2);
    color: var(--color-w);
    line-height: 1.2;
    font-weight: 700;
    font-size: var(--s-16);
    padding: 5px 0 0;
}
.sec4 .big-box .edu_box .l-site .box-info .box-row p,
.sec4 .big-box .edu_box .r-site .box-info .box-row p {
    color: var(--color-w);
}


.row-reverse {
    flex-direction: row-reverse;
}
.sec4 .big-box .edu_box .row-initial {
    flex-direction: initial;
}


/*/////////////////////RIGHT////////////////////*/
.sec4 .big-box .edu_box .r-site {
    flex-direction: initial;
}
.sec4 .big-box .edu_box .r-site .box-around {
    position: relative;
    right: 53px;
}
.sec4 .big-box .edu_box .r-site .box-around .bg-around .edu-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='m8 0 6.61 3h.89a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H15v7a.5.5 0 0 1 .485.38l.5 2a.498.498 0 0 1-.485.62H.5a.498.498 0 0 1-.485-.62l.5-2A.5.5 0 0 1 1 13V6H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 3h.89zM3.777 3h8.447L8 1zM2 6v7h1V6zm2 0v7h2.5V6zm3.5 0v7h1V6zm2 0v7H12V6zM13 6v7h1V6zm2-1V4H1v1zm-.39 9H1.39l-.25 1h13.72z'/%3E%3C/svg%3E");
    width: 40px;
    height: 40px;
}

.sec4 .big-box .edu_box .r-site .box-info::before {
    right: 100%;
    left: auto;
    border-left: 40px solid transparent;
    border-right: 40px solid var(--color-3);
}
.sec4 .big-box .edu_box:hover .r-site .box-info::before {
    border-right: 40px solid var(--color-11);
    transition: 0.6s all;
}

/*-----------------------SEC5-----------------------*/
.sec5 {
    background-image: url(img/counter-bg.jpg);
    padding: 130px 0 105px;
    background-position: center center;
    background-size: cover;
}
.sec5 .container {
    
}
.sec5 .box {
    text-align: center;
}
.sec5 .box h2,
.sec5 .box span {
    color: var(--color-w);
    padding: 0 0 1px;
    font-weight: 800;
    font-size: var(--s-40);
    line-height: 1.2;
    display: inline-block;
}
.sec5 .box p {
    color: var(--color-w);
    font-family: var(--font-1);
    font-weight: 800;
    font-size: var(--s-10);
    line-height: 1.2;
    text-transform: capitalize;
}

/*-----------------------SEC6-----------------------*/
.sec6 {
    background: var(--color-3);
    padding: 130px 0 105px;
}
.sec6 .title-box {
    margin-bottom: 35px;
}
.sec6 form .box input {
    color: var(--color-w);
    border: 1px solid #192e33;
    background: #01181d;
    padding-left: 30px;
    width: 100%;
    height: 60px;
    border-radius: 5px;
    outline: 0;
}
.sec6 form .box textarea {
    color: var(--color-w);
    height: 175px;
    width: 100%;
    margin-bottom: 25px;
    border-radius: 5px;
    padding: 10px 0 0 30px;
    border: 1px solid #192e33;
    background: #01181d;
    outline: 0;
}
.sec6 form .subBox {
    text-align: center;
}
.sec6 form .box .submit {
    background: var(--color-2);
    border: 0 none;
    font-weight: 600;
    padding: 15px 30px;
    font-size: 18px;
    border-radius: 5px;
    color: var(--color-w);
    width: 250px;
    margin-left: auto;
    transition: 0.6s;
}
.sec6 form .box .submit:hover {
    background: var(--color-13);
    transition: 0.6s;
}

/*-----------------------SEC7-----------------------*/
.sec7 {
    background: var(--color-3);
    padding: 90px 0 85px;
    text-align: center;
}
.sec7 h2 {
    color: var(--color-w);
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: 30px;
    font-weight: 700;
    font-size: var(--s-26);
}
.sec7 .box {
    display: flex;
    justify-content: center;
}
.sec7 .box .box-item {
    display: flex;
    justify-content: center;
    margin-right: 10px;
}
.sec7 .box span {
    position: relative;
    width: 10px;
    height: 10px;
    top: 8px;
    margin-right: 4px;
}
.sec7 .box .map {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6'/%3E%3C/svg%3E");
}
.sec7 .box .mail {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z'/%3E%3C/svg%3E");
}
.sec7 .box .phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z'/%3E%3C/svg%3E");
}
.sec7 .box p {
    color: var(--color-w);
}

/*-----------------------FOOTER-----------------------*/
footer {
    background: var(--color-12);
    padding: 26px 0 24px;
}
footer .box {
    display: flex;
    justify-content: space-between;
}
footer .box p,
footer .box .social-box a {
    color: var(--color-w);
    font-size: var(--s-16);
}
footer .box p {
    margin-bottom: 0px;
}
footer .box .social-box {
    display: flex;
}
footer .box .social-box a {
    text-decoration: none;
    margin-left: 8px;
    transition: 0.6s;
}
footer .box .social-box a:hover {
    color: var(--color-2);
    transition: 0.6s;
}




/*-----------------------PORTFOLIO-----------------------*/
.portfolio {
    background: var(--color-12);
    padding: 90px 0 95px;
}
.portfolio .title-box {
    margin-bottom: 35px;
}
.portfolio .title-box span {
    color: var(--color-w);
    font-size: var(--s-16);
    font-weight: 700;
    margin-bottom: 15px;
    border-radius: 30px;
}
.portfolio .title-box p {
    color: var(--color-w);
    font-size: var(--s-16);
    padding-top: 18px;
    width: 38%;
    margin: 0 auto;
}
.portfolio .title-box .pLongVer {
    display: block;
}
.portfolio .title-box .pShortVer {
    display: none;
}

.portfolio .select-box {
    text-align: center;
    margin-bottom: 35px;
}

.portfolio .select-box .nav {
    list-style: none;
    margin: 0 auto;
    justify-content: center;
}
.portfolio .select-box .nav li {
    position: relative;
    display: inline-block;
    margin: 0 5px 10px;
}
.portfolio .select-box .nav li .select {
    color: var(--color-w);
    padding: 10px 20px;
    font-size: var(--s-16);
    font-weight: 500;
    border: 1px solid #f3eaea;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.6s;
}
.portfolio .select-box .nav li .select:hover {
    background: var(--color-2);
    border-color: var(--color-2);
    transition: 0.6s;
}

.portfolio .select-box .nav li .select.active {
    background: var(--color-2);
    border-color: var(--color-2);
    transition: 0.6s;
}


.portfolio .tab-content .box {
    position: relative;
    overflow: hidden; 
    border-radius: 10px;
}


.portfolio .tab-content .box .bg {
    position: absolute;
    background: rgba(0, 77, 65, 0.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    transform-origin: var(--transform-origin, center);
    transform: scale(0);
    transition: transform 0.4s ease-out;
}

.portfolio .tab-content .box.hover-in .bg {
    transform: scale(1);
}

.portfolio .tab-content .box.hover-out .bg {
    transform: scale(0);
}


.portfolio .tab-content .box .bg h3 {
    position: relative;
    z-index: 35;
    color: var(--color-w);
    font-family: var(--font-2);
    font-size: var(--s-22);
    font-weight: 700;
    text-transform: capitalize;
}
.portfolio .tab-content .box .bg .box-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 22px;
} 
.portfolio .tab-content .box .bg .box-image .image_icon {
    width: 20px;
    height: 20px;
} 
.portfolio .tab-content .box .bg .box {
    position: relative;
    z-index: 35;
    color: var(--color-w);
}
.portfolio .tab-content .box .bg p {
    color: var(--color-w);
    font-size: var(--s-17);
}

.portfolio .tab-content .box .bg .box .image_icon .image_icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'/%3E%3Cpath d='M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}


.portfolio .tab-content .box img {
    width: 100%;
    height: auto;
}


.portfolio .tab-content .box .title {
    display: none;
}



















































/*--------------------ANIMATIONS--------------------*/
@keyframes anim-90 {
    0% {
        width: 0%;
    }
    100% {
        width: 90%;
    }
}
@keyframes anim-86 {
    0% {
        width: 0%;
    }
    100% {
        width: 86%;
    }
}
@keyframes anim-75 {
    0% {
        width: 0%;
    }
    100% {
        width: 75%;
    }
}
@keyframes anim-71 {
    0% {
        width: 0%;
    }
    100% {
        width: 71%;
    }
}
@keyframes anim-68 {
    0% {
        width: 0%;
    }
    100% {
        width: 68%;
    }
}
@keyframes anim-72 {
    0% {
        width: 0%;
    }
    100% {
        width: 72%;
    }
}
@keyframes loader {
    0% {
        width: 50%;
    }
    100% {
        width: 0%;
        opacity: 0;
    }
}





/*----------------------MEDIA----------------------*/

/*Rozdzielczość Monitory - Laptopy*/
@media (max-width: 1399.98px) {
}

/*Rozdzielczość Tablety poziomo */
@media (max-width: 1199.98px) {
}

/*Rozdzielczość Tablety pionowo */
@media (max-width: 991.98px) {
    h2 {
        font-size: var(--s-28);
    }
    
    .marginB {
        margin-bottom: 2rem !important;
    }
    
    .navbar {
        position: relative;
        background: var(--color-6);
        padding: 5px 0;
    }
    .navbar .container {
        padding: 0;
        max-width: 100%;
    }
    .navbar .navbar-brand {
        margin-left: 20px;
        font-size: 25px;
    }
    .navbar .navbar-toggler {
        margin-right: 40px;
    }
    .navbar .btn1 {
        margin-left: 13px;
    }
    .navbar .navbar-collapse {
        background: var(--color-w);
    }
    .navbar .navbar-collapse .btn-box {
        margin: 10px 0;
    }
    .navbar .navbar-nav .nav-item {
        border-bottom: 1px solid #ddd;
    }
    .navbar .navbar-nav .nav-item a {
        color: var(--color-444);
        padding: 12px 0;
        font-size: 16px;
        margin: 0 20px;
        font-size: var(--s-13);
        font-weight: 700;
        text-transform: uppercase;
        transition: 0.6s all;
    }
    .navbar .navbar-nav .nav-item:hover {
        background: var(--color-4);
        transition: 0.6s all;
    }
    .navbar .navbar-nav .nav-item:hover a {
        color: var(--color-5);
        transition: 0.6s all;
    }
    
    
    header {
        height: 80vh;
    }
    header .info-box {
        padding-top: 120px;
    }
    header .info-box h1 {
        font-size: var(--s-50);
    }
    header .foto-box {
        display: none;
    }
    
    .sec1 .box {
        min-height: 250px;
    }
}

/*Rozdzielczość Smartfony Poziomo */
@media (max-width: 767.98px) {
    h2 {
        font-size: var(--s-21);
    }
    
    .marginB {
        margin-bottom: 1rem !important;
    }
    
    header .info-box .intro {
    font-size: var(--s-25);
    padding: 0 0 5px 0;
    }
    header .info-box h1 {
        font-size: var(--s-40);
        min-height: 50px;
    }
    
    header .info-box ul {
        display: block;
    }
    header .info-box ul li {
        margin-bottom: 5px;
    }
    
    .sec1 .box {
        min-height: 150px;
    }
    
    
    
    
    .sec4 .big-box .edu_box {
        margin-bottom: 30px;
    }
    .sec4 .big-box .edu_box::before {
        right: 18px;
        left: auto;
    }
    .sec4 .big-box .edu_box .l-site,
    .sec4 .big-box .edu_box .r-site {
        width: 100%;
    }
    .sec4 .big-box .edu_box .l-site .box-around {
        right: -10px;
    }
    .sec4 .big-box .edu_box .l-site .box-around .bg-around, 
    .sec4 .big-box .edu_box .r-site .box-around .bg-around {
        width: 55px;
        height: 55px;
    }
    .sec4 .big-box .edu_box .l-site .box-info,
    .sec4 .big-box .edu_box .r-site .box-info {
        padding: 18px 15px;
    }
    .sec4 .big-box .edu_box .l-site .box-info::before,
    .sec4 .big-box .edu_box .r-site .box-info::before {
        width: 30px;
        height: 30px;
        border-top: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid var(--color-3);
    }
    .sec4 .big-box .edu_box .r-site .box-info::before {
        border-left: 20px solid transparent;
        border-right: 20px solid var(--color-3);
    }
    .sec4 .big-box .edu_box:hover .l-site .box-info::before {
        border-left: 20px solid var(--color-11);
    }
    .sec4 .big-box .edu_box:hover .r-site .box-info::before {
        border-right: 20px solid var(--color-11);
    }
    

    .sec4 .big-box .row-reverse::before {
        right: 18px;
        left: 18px;
    }
    .sec4 .big-box .edu_box .r-site .box-around {
        right: 9px;
    }
    
    .sec7 .box {
        display: block;
    }
    
    .portfolio .title-box .pLongVer {
        display: none;
    }
    .portfolio .title-box .pShortVer {
        display: block;
    }
    
    
    footer .box {
        display: block;
        text-align: center;
    }
    footer .box .social-box {
        justify-content: center;
    }
    footer .box .social-box a {
        margin: 0 4px;
    }
    
   
}

/*Rozdzielczość Smartfony Pionowo */
@media (max-width: 575.98px) {
    
    
    .portfolio .tab-content .grid-item .box {
        box-shadow: 0 20px 30px 2px rgba(0, 77, 65, 0.58);
        bottom: -10px;
        margin-bottom: 30px; 
    }
    .portfolio .tab-content .grid-item .box .title {
        position: relative;
        display: block;
        padding: 20px 30px 30px;
    }
    .portfolio .tab-content .grid-item .box .title h2 {
        margin: 5px 0 0;
        color: var(--color-w);
        font-size: var(--s-21);
    }
    .portfolio .tab-content .grid-item .box .title p {
        margin: 0;
        padding: 18px 0px 10px 0px;
        color: var(--color-w);
        font-size: var(--s-16);
    }
    .portfolio .tab-content .grid-item .box .title .btn2 {
        max-width: 130px;
    }
    .portfolio .tab-content .grid-item .box .title {
    }
}