@font-face {font-family: 'vazir';src: url('/font/vazir.ttf');}
@font-face {font-family: 'dastnevis';src: url('/font/dastnevis.ttf');}


html, body {
    margin: 0;
    padding: 0;
    font-family: 'vazir';
  background-color: var(--color16);
    line-height: 2;
overflow-x: hidden;
    direction: rtl;
}

:root {

--color1: #000000;
--color2: #202020;
--color3: #282828;
--color4: #404040;
--color5: #606060;
--color6: #707070;
--color7: #808080;
--color8: #909090;
--color9: #A0A0A0;
--color10: #B0B0B0;
--color11: #C0C0C0;
--color12: #D0D0D0;
--color13: #E0E0E0;
--color14: #F0F0F0;
--color15: #F9F9F9;
--color16: #FFFFFF;
  --color17: #f9f9f9;
  --color18: #ffffff;
}


:root {
  --opacity0: #00000005;
  --opacity1: #0000001a;
  --opacity2: #00000050;
  --opacity3: #00000075;
  --opacity4: #00000090;
  --opacity5: #00000095;
  --opacity6: #F9F9F925;
  --opacity7: #F9F9F950;
  --opacity8: #F9F9F975;
  --opacity9: #F9F9F990;
  --opacity10: #f9f9f9f5;
}



:root {
  	--origin1: #e6f5fd;
  	--origin2: #cdebfb;
    --origin3: #b4e1f9;
    --origin4: #9cd7f8;
    --origin5: #83cdf6;
    --origin6: #6ac3f4;
    --origin7: #52b9f3;
    --origin8: #39aff1;
    --origin9: #20a5ef;
    --origin10: #00a4ff;
    --origin11: #078cd6;
    --origin12: #067cbe;
    --origin13: #056da6;
    --origin14: #044e77;
    --origin15: #022e47;
    --origin20: #a0d102;
  	--origin21: #cfff35;
}



:root {
  	--origin10-5:  #00a4ff08;
    --origin10-15: #00a4ff0d;
  	--origin10-25: #00a4ff25;
    --origin10-50: #00a4ff50;
    --origin10-75: #00a4ff75;
    --origin10-90: #00a4ff90;
    --origin10-95: #00a4fff5;
}

:root {
    --gap-2: .2%;
  	--gap-5: .5%;
  	--gap1: 1%;
  	--gap2: 2%;
  	--gap3: 3%;
  	--gap4: 4%;
  	--gap5: 5%;
  	--gap6: 6%;
  	--gap7: 7%;
  	--gap8: 8%;
    --titr-line-height: 1.2;
    --item-count1:1;
    --item-count2: 2;
    --item-count3: 3;
    --item-count4: 4;
    --item-count5: 5;
    --item-count6: 6;
   	--body-line-height: 2;
  	--border-radius: 15px;
  	--huge:3.5rem;
  	--very-big:2.5rem;
  	--big:2rem;
  	--very-large:1.5rem;
    --large:1.2rem;
  	--normal:1rem;
  	--medium:0.9rem;
  	--small:.8rem;
    --verysmall:.6rem;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

body[data-page-type=homepage] {

}

header {
display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 5px;
  width: 100%;
      position: relative;
    z-index: 90;
      background: var(--color15);
}

a {
    text-decoration: none;
    transition: .3s ease-out;
  	color: var(--color1);
}

figure {
    margin: 0;
    padding: 0;
  line-height: 0;
}

.dropdown ul li a , .dropdown ul li a:visited , .dropdown ul li a:link {
    color: var(--color5);
}

.karik-logo-place {
flex:1
}

.menu {
  display:none }

i {
    cursor: pointer;
}

.menu i {
display: none;
}

.menu-place {
    text-align: center;
  flex:6
}

.dropdown li span {
float: left;
  padding-right: 10px;
}

.dropdown span::after {
border-top-color: var(--origin4);
}

.dropdown ul li.hover, .dropdown ul li:hover {
  border-bottom: unset;
      background-color: var(--color14);
}

.dropdown ul li a:hover {
  color: var(--origin7);
}

.dropdown ul li li.hover, .dropdown ul li li:hover {
  background-color: var(--origin3);
}

.karik-start {
flex:1  ;
      text-align: left;
}

.karik-start a {
color: var(--origin20);
    border: 2px solid var(--origin20);
    padding: var(--gap6);
    border-radius: var(--border-radius);
}

.karik-start a:hover {
    color: var(--color18);
    border: 2px solid var(--origin21);
    padding: var(--gap4);
    background-color: var(--origin20);
}

.karik-banner {
    display: flex;
    width: 100%;
    flex-wrap: wrap; 
      position: relative;
    z-index: 2;
}
.karik-banner , header {
        padding: 0px var(--gap8);
  }

.karik-banner {
        padding: 0px 10%;
  }

.karik-banner section {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 10;
    margin-top: var(--gap5);
}

.karik-banner section:nth-child(2) {
background-image: url(/directory/karikwebcom/pic/karik-bg-dotted.webp);
    background-position: center;
    background-repeat: no-repeat;
}

.karik-banner video {
border-radius: 110px;
  box-shadow: 0 0 14px 5px rgb(90 97 105 / 40%), 0 2px 3px rgb(90 97 105 / 40%);
}

.karik-banner h1 {
    color: var(--origin10);
    font-size: var(--huge);
  font-family:dastnevis;
      margin: 0;
}

.karik-banner h2 {
color: var(--origin12);
      margin: 0 0 40px 0;
}

.karik-svg {
    position: relative;
    z-index: 5;
}

.fixed {
transition: .5s ease-out;
    position: fixed !important;
    padding: 0px var(--gap5);
        background-color: var(--opacity10);
      z-index: 50;
  height: 70px;
}

.fixed .karik-logo-place img {
    height: 70px;
    padding-top: 10px;
}

.karik-link-blue {
    color: var(--color18);
    border: 2px solid var(--color18);
    padding: 10px 20px;
    border-radius: var(--border-radius);
    background-color: var(--origin10);
}

.karik-link-blue:hover {
    padding: 10px 30px;
    background-color: var(--origin5);
}

.karik-link-green {
    color: var(--color18);
    padding: 10px 20px;
    border-radius: var(--border-radius);
    background-color: var(--origin20);
      position: relative;
    z-index: 10;
}

.karik-link-green:hover {
background-color: var(--origin21);
    padding: 10px 30px;
    color: var(--color2);
}

.karik-svg path {
    fill: var(--color14);
}

.karik-svg svg {
margin-bottom: -15px;
}

.karik-content-pricelist {
flex-wrap: wrap;
    display: flex;
    justify-content: center;
  position: relative;
        background-color: var(--color14);
}

.karik-content-pricelist section {
width: calc(100% / var(--item-count3) - var(--gap2));
  border-radius: 15px;
    text-align: center;
    transition: transform .5s, box-shadow .3s;
    min-height: 650px;
    margin: var(--gap1);
  padding: var(--gap2);
  background: var(--color18);
}

.karik-content-pricelist section:hover {
    box-shadow: 0 7px 35px rgb(90 97 105 / 40%), 0 2px 3px rgb(90 97 105 / 40%);
    transform: scale(1.03);
  background-color: var(--color18);
}

.karik-content-pricelist section img {
max-width: 100%;
    height: 300px;
    object-fit: cover;
      border-radius: 25% 5%;
  transition: .3s ease-out;
}

.karik-content-pricelist section:hover img {
  padding:4px;
      border-radius: 20px;
}

.karik-content-pricelist section figure {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.karik-content-pricelist section figure:before {
position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}

.karik-content-pricelist section:hover figure::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}

@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}

.karik-content-pricelist h2 {
display: flex;
    width: 100%;
    text-align: center;
    justify-content: space-evenly;
    margin: 0px;
    color: var(--origin13);
}

.karik-content-pricelist section h3 {
    color: var(--origin10);
  font-size: var(--very-large);
}

.karik-content-pricelist section h4 {
    color: var(--origin20);
}

.karik-content-pricelist section ul {
    list-style: none;
    padding-right: 0;
    text-align: right;
    min-height: 130px;
}

.karik-content-pricelist section li:before {
    content: '\e82a';
    margin: -10px 10px;
    color: var(--origin10);
    font-family: 'webfont';
    float: right;
    font-size: 1.5em;
}

.karik-content-pricelist section li{
    color: var(--color6);
}

.karik-content-option {
text-align:center;
  background-color: var(--origin15);
    color: var(--color18);
}

.karik-content-option > div {
flex-wrap: wrap;
    display: flex;
    justify-content: center;
      margin: var(--gap5) 0px;
}

.karik-content-option div section {
width: calc(100% / var(--item-count5) - var(--gap2));
  text-align: center;
    transition: transform .5s, box-shadow .3s;
    padding: var(--gap1);
   transition: .3s ease-out;
}

.karik-content-option div section:hover img  {
transform: scale(0.9);
}

.karik-content-option div section:nth-child(1) {
border-style: solid;
    border-width: 0px 0px 1px 1px;
    border-color: var(--origin10-25);
}

.karik-content-option div section:nth-child(2) {
border-style: solid;
    border-width: 0px 0px 1px 1px;
    border-color: var(--origin10-25);
}

.karik-content-option div section:nth-child(3) {
border-style: solid;
    border-width: 0px 0px 1px 1px;
    border-color: var(--origin10-25);
}

.karik-content-option div section:nth-child(4) {
border-style: solid;
    border-width: 0px 0px 1px 1px;
    border-color: var(--origin10-25);
}

.karik-content-option div section:nth-child(5) {
border-bottom: solid 1px var(--origin10-25);
}

.karik-content-option div section:nth-child(6) {
border-left: solid 1px var(--origin10-25);
}

.karik-content-option div section:nth-child(7) {
border-left: solid 1px var(--origin10-25);
}

.karik-content-option div section:nth-child(8) {
border-left: solid 1px var(--origin10-25);
}

.karik-content-option div section:nth-child(9) {
border-left: solid 1px var(--origin10-25);
}

.karik-content-option div section:hover {
    background-color: var(--origin11);
  box-shadow: rgb(2 46 71 / 65%) 0px 0px 20px 5px inset;
}

.karik-content-option div section a {
    color: var(--color18);
    transition: .3s ease-out;
}

.karik-content-option div section img {
max-width: 100%;
    height: 50px;
      margin-bottom: 20px;
    transition: .3s ease-out;
}

.karik-content-products {
        padding: 0 var(--gap8) var(--gap3);
        flex-wrap: wrap;
    display: flex;
    justify-content: center;
      position: relative;
    z-index: 1;
}

.karik-content-features {
      flex-wrap: wrap;
    display: flex;
    justify-content: center;
}



.karik-content-products section , .karik-content-features section {
width: calc(100% / var(--item-count2) - var(--gap2));
  margin: 0px var(--gap1);
}

.karik-content-features article {
text-align: justify;
}

.karik-content-products section:nth-child(2) {
text-align:left
}

.karik-content-products section h2 , .karik-content-features section h2 , .karik-content-Subsystem h2 , .karik-content-faq h2 , .karik-content-article h2 {
    color: var(--origin13);
}

.karik-products h2 {
margin:0px;
  font-size: var(--normal);
}

.karik-content-products section h3 , .karik-content-features section h3 {
    color: var(--origin10);
}

.karik-content-products section hr , .karik-content-features section hr , .karik-content-Subsystem hr , .karik-content-faq hr , .karik-content-article hr{
    width: 50%;
    background-color: var(--origin13);
    height: 3px;
    margin: 0px;
    padding: 0px;
    border: unset;
}

.karik-content-products section p , .karik-content-features section p {
    text-align: justify;
}

.karik-products {
flex-wrap: wrap;
    display: flex;
        justify-content: flex-start;
}

.karik-products article {
width: calc(100% / var(--item-count2) - var(--gap2));
    margin: 0px var(--gap1);
  text-align: justify;
}

.karik-products article a {
color: var(--origin10);
}

.karik-products article div > a {
background-color: var(--origin13);
    border-radius: 50px;
    color: var(--color16);
    width: 50px;
    height: 50px;
    text-align: center;
    padding-top: 8px;
    margin-left: 10px;
}

.karik-products article div {
  transition: .3s ease-out;
display:flex;
  align-items: center;
}

.karik-products article div:hover {
padding-right:10px;
  color: var(--origin13);
}

.karik-products article div:hover > a {
transition: transform 0.7s;
    transform: rotateY(360deg);
}

.karik-content-products section figure , .karik-content-features section figure {
text-align: center;
    background-image: url(/directory/karikwebcom/pic/karik-bg-dotted.webp);
    background-position: center;
    background-repeat: no-repeat;
}

.karik-content-products section img , .karik-content-features section img {
    max-width: 100%;
  transition: .3s ease-out;
}

.karik-content-products section img:hover , .karik-content-features section img:hover {
    max-width: 100%;
    transition: .3s ease-out;
    transform: scale(0.95);
}

.karik-content-pricelist , .karik-content-option , .karik-content-portfolio , .karik-content-features , .karik-content-Subsystem , .karik-content-faq , .karik-content-article {
padding: var(--gap3) var(--gap8);
}

.karik-content-portfolio { 
  background-color: var(--color14);
  text-align:center;
      padding-bottom: 200px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='2000' height='900' preserveAspectRatio='none' viewBox='0 0 2000 900'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1037%26quot%3b)' fill='none'%3e%3cpath d='M -1016.821999170501%2c83 C -816.82%2c220.4 -416.82%2c734.2 -16.82199917050109%2c770 C 383.18%2c805.8 583.18%2c293.8 983.178000829499%2c262 C 1383.18%2c230.2 1779.81%2c604.6 1983.1780008294988%2c611 C 2186.54%2c617.4 1996.64%2c357.4 2000%2c294' stroke='rgba(255%2c 255%2c 255%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -1368.8099768581612%2c87 C -1168.81%2c180.8 -768.81%2c527.6 -368.8099768581612%2c556 C 31.19%2c584.4 231.19%2c202 631.1900231418388%2c229 C 1031.19%2c256 1357.43%2c664.6 1631.1900231418388%2c691 C 1904.95%2c717.4 1926.24%2c427 2000%2c361' stroke='rgba(255%2c 255%2c 255%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -948.7922240807633%2c699 C -748.79%2c591.8 -348.79%2c205.8 51.20777591923675%2c163 C 451.21%2c120.2 651.21%2c474.4 1051.2077759192368%2c485 C 1451.21%2c495.6 1861.45%2c185.2 2051.2077759192366%2c216 C 2240.97%2c246.8 2010.24%2c554.4 2000%2c639' stroke='rgba(255%2c 255%2c 255%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -1131.3129250999566%2c380 C -931.31%2c409 -531.31%2c549.2 -131.31292509995652%2c525 C 268.69%2c500.8 468.69%2c237.8 868.6870749000435%2c259 C 1268.69%2c280.2 1642.42%2c630.6 1868.6870749000434%2c631 C 2094.95%2c631.4 1973.74%2c335 2000%2c261' stroke='rgba(255%2c 255%2c 255%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1037'%3e%3crect width='2000' height='900' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
}

.karik-content-portfolio h2 { 
      color: var(--origin20);
}

.dg-wrapper {
    width: 575px;
    height: 410px;
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.dg-wrapper a {
    width: 550px;
    height: 310px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: transparent url(https://karikweb.com/directory/karikwebcom/images/browser.png) no-repeat top left;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
    background-size: contain;
    background-color: #fff;
}

.dg-wrapper a img {
    width: 100%;
    height: auto;
    display: block;
    padding: 25px 0px 0px 1px;
    position: absolute;
    clip: rect(0px,550px,300px,0px);
}

.karik-content-consulting {
    background-color: var(--origin13);
    margin: -150px var(--gap8);
    padding: var(--gap1);
    border-radius: 30px;
      position: relative;
}

.karik-content-consulting form {
    text-align: center;
}

.karik-content-consulting span {
    color: var(--color18);
    font-size: var(--very-large)
}

.karik-content-consulting fieldset {
background-color: unset !important;
    border: 0px !important;
}

.karik-content-consulting legend {
    display: none;
}

.karik-content-consulting fieldset ul li {
    width: 50%;
  height: 50px;
}

.karik-content-consulting fieldset ul li textarea {
    height: 115px !important;
}

html:lang(ar) form[id^="form"] fieldset li input, html:lang(ar) form[id^="form"] fieldset li textarea, html:lang(fa) form[id^="form"] fieldset li input, html:lang(fa) form[id^="form"] fieldset li textarea {
  font-family: vazir;
  border-radius: 10px;
    height: 50px;
      text-align: right;
    padding: 10px;
}

form[id^="form"] input[type="button"], input[type="reset"], form[id^="form"] button, button, input[type="button"] {
  color: white;
  background-color: var(--origin20);
  font-family: vazir;
  font-weight: normal;
      margin: auto;
}

form[id^="form"] button:hover {
    background-color: var(--origin21);
    color: var(--color1);
}

.karik-content-consulting h6 {
display:none
}

.message {
    background-color: #a5cf8ff5;
    width: 100%;
    padding: 20px 0px;
    margin: unset;
    position: absolute;
    top: 80px;
    right: 0;
}

.karik-content-features {
  background-color: var(--origin2);
  padding-top: 250px;
  flex-direction: row-reverse;
}

.icon-angle-double-down {
background-color: var(--origin8);
    border-radius: 500px;
    padding: 20px 10px 8px 10px;
    color: var(--color16);
  transition: .3s ease-out;   
}

.icon-angle-double-down:before {
float:unset
}

.icon-angle-double-down:hover {
    background-color: var(--origin5);
    padding: 15px 5px 0px 5px;
}

.karik-content-Subsystem hr , .karik-content-article hr , .karik-content-faq hr{
    margin: auto;
}

.karik-content-Subsystem , .karik-content-faq {
    text-align: center;
      position: relative;
}

.karik-Subsystem-place {
flex-wrap: wrap;
    display: flex;
    justify-content: center;
  margin-top: 20px;
}

.karik-Subsystem-place article {
    margin: 10px;
    border-radius: var(--border-radius);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border: 2px solid var(--color18);
    padding: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 27%, rgb(245 245 245) 100%);
  transition: .5s ease-out;
      position: relative;
    z-index: 20;
}

.karik-Subsystem-place article:hover {
transform: scale(0.98);
}

.karik-Subsystem-place article:nth-child(1) {
flex:2
}

.karik-Subsystem-place div:nth-child(2) {
flex:1
}

.karik-Subsystem-place div:nth-child(3) {
    display: flex;
    flex-wrap: wrap;
}

.karik-Subsystem-place div:nth-child(3) article {
width: calc(100% / var(--item-count3) - var(--gap2));
}

.karik-Subsystem-place article div {
display: flex;
    flex-direction: column;
    align-items: center;
}

.karik-Subsystem-place article div > a {
    background-color: var(--origin10);
    width: 70px;
    height: 70px;
    padding: 20px 0px;
    border-radius: 50px;
    text-align: center;
      color: var(--color18);
}

.karik-Subsystem-place article div:hover > a {
    background-color: var(--origin10);
        transition: transform 0.7s;
    transform: rotateY(360deg);
}

.karik-Subsystem-place article div:hover strong a {
	color:var(--origin11);
}

.karik-content-faq details {
    background-color: var(--color15);
    width: 100%;
    margin: 1% auto;
    padding: 0 .9%;
    border: 1px solid var(--color13);
    text-align: right;
    transition: all 0.5s ease-in-out;
    border-radius: 20px;
}

.karik-content-faq details > summary {
    list-style: none;
    cursor: pointer;
    position: relative;
}

.karik-content-faq details summary:after {
    content: '\e831';
    font-family: "webfont";
    font-size: 1.2EM;
        color: var(--origin8);
    position: absolute;
    right: 8px;
    top: 0;
    font-weight: normal;
}

.karik-content-faq h3 {
margin-right: 30px;
}

.karik-content-article {
text-align:center;
  background-color: var(--color14);
}

.karik-article-place {
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
      margin-top: 20px;
  padding-bottom:100px;
}

.karik-article-place article {
    width: calc(100% / var(--item-count4) - var(--gap2));
        margin: var(--gap1);
    border-radius: var(--border-radius);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding: 20px;
    background: var(--color18);
  transition: .5s ease-out;
}

.karik-article-place article:hover {
transform: scale(0.98);
}

.karik-article-place article img {
    height: 210px;
    object-fit: cover;
    max-width: 100%;
    transition: .5s ease-out;
}

.karik-article-place article figure {
    overflow: hidden;
}

.karik-article-place article img:hover {
   transform: scale(1.1);
}

.karik-article-place article sup {
text-align: left;
    float: left;
    width: 100%;
  color: var(--origin11);
}

.karik-article-place article h3 {
    text-align: right;
    width: 100%;
    float: right;
  line-height: 1.5;
}

.karik-article-place article h3 a {
color: var(--origin13);
}

.karik-article-place article h3 a:hover {
color: var(--origin9);
}

.svg-footer {
   margin-top: -300px;
}

.svg-footer path {
fill: var(--origin11);
}

.svg-footer svg {
margin-bottom: -40px;
}

footer {
    background-color: var(--origin11);
  padding-bottom: var(--gap3);
      padding-top: 200px;
}

.karik-footer-links {
padding: 0px var(--gap8);
  background-color: var(--origin11);
}

.karik-footer-links h2 {
    color: var(--origin3);
}

.karik-footer-links hr {
    width: 30%;
    background-color: var(--origin3);
    height: 3px;
    margin: 0px;
    padding: 0px;
    border: unset;
}

.karik-links-place {
flex-wrap: wrap;
    display: flex;
    margin-top: 20px;
  justify-content: flex-start;
}

.karik-links-place a {
width: calc(100% / var(--item-count4) - var(--gap2));
      margin: var(--gap1);
  border-bottom: 1px dashed var(--origin8);
    color: var(--color18);
  transition: .5s ease-out;
}

.karik-links-place a:hover {
padding-right:10px;
  color: var(--origin3);
}

.karik-links-place a:before {
    content: '\e801';
    color: var(--origin6);
    padding-left: 10px;
    font-family: 'webfont';
}

.karik-contact {
    padding: var(--gap2) var(--gap8);
  flex-wrap: wrap;
    display: flex;
  justify-content: flex-start;
      color: var(--color18);
}

.karik-contact section {
width: calc(100% / var(--item-count2) - var(--gap2));
      margin: var(--gap1);
}

.karik-contact section ul {
margin: 0;
    padding: 0;
    list-style: none;
}

.karik-contact section a:before {
    font-size: var(--normal);
    color: var(--origin6);
    padding-left: 5px;
    width: unset;
}

.karik-contact section a {
color: var(--color18);
  transition: .5s ease-out;
}

.karik-contact section a:hover {
color: var(--origin6);
  padding-right:10px
}

.karik-copyright {
text-align: center;
    font-size: var(--verysmall);
    color: var(--origin4);
}

.karik-copyright a {
color: var(--origin4);
}
    --top
polygon(0 0,100% 0,100% calc(100% - 104px),50% 100%,0 calc(100% - 104px))
: polygon(0 0, 100% 0, 100% calc(100% - 104px), 50% 100%, 0 calc(100% - 104px));
    --bottom: polygon(0 0, 50% 104px, 100% 0, 100% 100%, 0 100%);
    --m: -104px;


#demo.clip:before , #demo2.clip:before {
    clip-path: var(--top);
}
#demo:before {
    background: var(--origin15);
}
#demo2:before {
            background-color: var(--color18);
}
#demo:before, #demo:after , #demo2:before, #demo2:after {
    content: "";
}

#demo.clip:after , #demo2.clip:after {
    clip-path: var(--bottom);
}

#demo:after {
    background: var(--color18);
    margin-top: var(--m);
}

#demo2:after {
    background: var(--color14);
    margin-top: var(--m);
}

#demo {
margin-top: -150px;
    height: 210px;
    display: grid;
    grid-template-rows: calc(50% - var(--m) / 2) calc(50% + var(--m) / 2);
    --top: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
    --bottom: polygon(0 0, 100% 50px, 100% 100%, 0 100%);
    --m: -40px;
}

#demo2 {
    height: 210px;
    display: grid;
    grid-template-rows: calc(50% - var(--m) / 2) calc(50% + var(--m) / 2);
    --top: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
    --bottom: polygon(0 0, 100% 50px, 100% 100%, 0 100%);
    --m: -40px;
      position: relative;
    margin-top: -100px;
    z-index: 0;
}


.up {
    cursor: pointer;
    position: fixed;
    bottom: 70px;
    left: 20px;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    transition: .3s ease-out;
  text-align: center;
          background-color: var(--opacity1);
  z-index: 30;

}

.up i {
    transition: .3s ease-out;
}

.icon-up::before {
    margin-top: 15px;
  color: var(--origin10);
}

.fullscreen-video-container {

  position: relative;



  width: 100vw;

  overflow: hidden;
  
  display: flex;

  justify-content: center;

  align-items: center;

}

.fullscreen-video-container video {

  position: absolute;

  width: auto;

  height: auto;

  min-width: 100%;

  min-height: 100%;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

  z-index : 1;

}

.wrapper {
	
	direction: rtl;
}


.toc i{
  float:left;
  color:var(--origin10);
  cursor:pointer;
  
  
}
.toc {
PADDING:40PX;
}

.contact-us-whatsapp {
    cursor: pointer;
    position: fixed;
    z-index: 110;
    float: left;
    left: 20px;
    padding: 5px 5px 0px 5px;
    bottom: 10px;
    transition: 0.5s ease-in-out;
    background-color: var(--origin20);
    border-radius: 50%;
}

.contact-us-tele {
cursor: pointer;
position: fixed;
z-index: 110;
float: left;
left: 75px;
padding: 5px 5px 0px 5px;
bottom: 10px;
transition: 0.5s ease-in-out;
background-color: #0084c65c;
border-radius: 50%;
}

.contact-us-whatsapp i, .contact-us-tele i{
    color: #fff;
    cursor: pointer;
        font-size: var(--large);
}

.contact-us-whatsapp i::before, {
    font-size: 1.5EM;
    margin-top: 8px;
}

.karik-circle01 svg {
    position: absolute;
    z-index: 0;
        fill: var(--origin10-15);
}

.karik-circle01 svg:nth-child(1) {
    width: 200px;
    right: 100px;
    top: 0px;
          fill: var(--opacity0);
}

.karik-circle01 svg:nth-child(2) {
    width: 400px;
    right: -150px;
    top: 150px;
}

.karik-circle01 svg:nth-child(3) {
    width: 400px;
    left: -150px;
    top: 0;
}

.karik-circle02 svg {
    position: absolute;
    z-index: 0;
    fill: var(--origin10-5);
}

.karik-circle02 svg:nth-child(1) {
    width: 400px;
    right: -100px;
    top: 300px;
}

.karik-circle02 svg:nth-child(2) {
width: 200px;
    right: 0px;
    top: 50px;
  fill: var(--origin10-15);
}

.karik-circle02 svg:nth-child(3) {
    width: 400px;
    left: 50px;
    top: 50px;
    fill: var(--origin10-15);
}

.karik-circle02 svg:nth-child(4) {
    width: 300px;
    left: -80px;
    top: 600px;
    fill: var(--opacity0);
}

.karik-circle02 svg:nth-child(5) {
    width: 500px;
    right: 50px;
    top: 1000px;
    fill: var(--opacity0);
}


/* Under 1400px	*/
@media (max-width: 1400px) {
  
  .karik-banner, header {
    padding: 0px var(--gap2);
}
  
  .karik-content-pricelist, .karik-content-option, .karik-content-Subsystem, .karik-content-faq, .karik-content-article {
    padding: var(--gap3) var(--gap2);
}
  
.karik-content-portfolio, .karik-content-features {
  padding-right: var(--gap3);
  padding-left: var(--gap3);
  }
  
  .karik-content-products {
    padding: 0 var(--gap2) var(--gap3);
}
  
  #demo2 {
    margin-top: 0px;
}
  
  .karik-contact {
    padding: var(--gap2) var(--gap2);
}
}

/* Under 1280px	*/
@media (max-width: 1280px) {
  
.karik-banner h1 {
    font-size: var(--very-big);
}
  #demo {
    margin-top: -50px;
}
}


/* Under 1024px	*/
@media (max-width: 1024px) {

  .dg-wrapper a {
    transform: translateX(0) translateZ(0) rotateY(0) !important;
    width: 450px;
    height: 255px;
}
  .dg-wrapper {
    width: 450px;
}
  
  .karik-content-consulting span {
    font-size: var(--normal);
    margin-right: 30px;
}
  
  .menu {
    display: inline;
    flex: 1;
}
  
  .karik-start a {
    padding: var(--gap2);
    font-size: var(--small);
}
  
  .karik-logo-place {
    text-align: right;
}
  
    .menu i {
  display: block;
    text-align: right;
            color: var(--color5);
  }
  
     .menu-place {
        position: absolute;
        width: 100%;
        right: -1050px;
        top: 85px;
       display: none;
    }
  
  .karik-content-option div section {
    width: calc(100% / var(--item-count5));
}

  .fixed .menu-place {
          top: 70px;
  }
  
  .dropdown ul {
  width: 100%;
background-color: var(--color15);
   box-shadow: 0px 6px 9px -3px rgba(51,51,51,0.75);
  }
  
  .dropdown ul li {
  display: block;
    padding: 10px 15px;
    border-bottom: 1px dotted var(--color10);
  }
  

  
  .dropdown ul li:last-child {
   border-bottom: unset;
  }
  
  .dropdown li span {
  float: left;
  }
  
  .dropdown ul li li {
  background-color: var(--color15);
  width: 100%;
}
  .dropdown ul li li.hover, .dropdown ul li li:hover {
  background-color: unset;
}
  
  .dropdown ul li.hover, .dropdown ul li:hover {
  border-bottom: 1px dotted var(--color10);
  }
  
  
  .dropdown ul li a, .dropdown ul li a:visited, .dropdown ul li a:link {
  color: var(--color1);
  }
}


/* Under 820px	*/
@media (max-width: 820px) {
    .karik-content-pricelist section {
    margin: var(--gap3);
    padding-bottom: var(--gap6);
}
  
  .karik-banner section:nth-child(1) {
    margin-bottom: 50px;
    padding-top: 0px
}
  
  .karik-banner section {
    flex: unset;
    text-align: center !important;
    width: 100%;
}
  
      .karik-banner h1 {
        margin: 0px;
    }
  
  .karik-banner h2 {
    margin-bottom: 40px;
}
  
      .karik-content-option div section {
        width: calc(50% / var(--item-count2));
    }
  
    :root {
  --item-count2: 1;
  --item-count3: 1;
  --item-count4: 2;
  }
  
  .karik-content-option div section:nth-child(2) , .karik-content-option div section:nth-child(4) , .karik-content-option div section:nth-child(6) , .karik-content-option div section:nth-child(8) {
    border-width: 0px 0px 1px 0px;
        border-style: solid;
        border-color: var(--origin10-25);
}
  .karik-content-option div section:nth-child(5) {
    border-left:solid 1px var(--origin10-25);
}
  .karik-content-option div section:nth-child(7) {
    border-bottom: solid 1px var(--origin10-25);
}
  
  .karik-Subsystem-place div:nth-child(3) article {
    width: calc(100% / var(--item-count1) - var(--gap2));
}
  
  .karik-Subsystem-place article {
    flex: unset !important;
}
  .karik-content-consulting {
    margin: -150px var(--gap2);

}
  }
  

/* Under 620px	*/
@media (max-width: 620px) {
  
.karik-content-products section:nth-child(2) {
    margin-top: 30px;
}
}





/* Under 520px	*/
@media (max-width: 520px) {
  
  .karik-content-faq h3 {
    font-size: var(--normal);
}
  
.karik-banner video {
  width:350px!important;
  height:350px!important;
}
  
  .karik-content-consulting fieldset ul li {
    width: 100%;
    height: unset;
}
  
  .karik-content-portfolio {
    padding-bottom: 300px;
}
  
      .karik-content-consulting {
        margin: -250px var(--gap2);
    }
  
    :root {
  --item-count4: 1;
}
}


/* Under 430px	*/
@media (max-width: 430px) {
      .karik-banner h1 {
        font-size: var(--big);
    }
      .dg-wrapper {
        width: 350px;
    }
      .dg-wrapper a {
        width: 350px;
        height: 195px;
    }
  .dg-wrapper {
    height: 280px;
}
  
}

/* Under 360px	*/
@media (max-width: 360px) {
  
  
}