@font-face {
  font-family: Almarai;
  src: url(../Fonts/Almarai-Regular.ttf);
}
*{margin: 0; padding: 0; box-sizing: border-box; font-family: Almarai;}

/* NAVBAR */
#nav {box-shadow: 0 7px 30px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);}
#nav #login{text-align: center; font-size: 14px; font-weight: bold; color:#fff; border: 1px solid #6D2181;
      border-radius: 10px;  margin-right: 15px;  padding: 10px 20px ; background-size: 300% 300%;
      box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
      background-image: linear-gradient(to right, #8B1074 0%, #6D2181 50%);}
.navbar #login:hover {background-position: right center;}
#nav #register 
{text-align: center; font-size: 14px; font-weight: bold; color:#6D2181; border: 1px solid #6D2181; 
  border-radius: 10px; padding: 10px 22px;  
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);}
#nav #register:hover {background-color:  #6D2181; color: #fff;}
#nav #logo{text-align: right;}

/* HEADER */
.head .head-image {display: flex;}
.head .head-title, .free .free-title, .setting .setting-title, .profits .profit-title 
{display: flex; flex-direction: column; justify-content: center;}
.head .head-title h2, .free .free-title h2, .setting .setting-title h2, .profits .profit-title h2, 
.control .control-title h2, .carousel h2 {font-size: 35px; font-weight: bold;}
.head .head-title p, .free .free-title p, .setting .setting-title p, .profits .profit-title p, .control .control-title p
{font-size: 20px; color: #808080; line-height: 45px;}
.head .head-title .btn {text-align: right;}
.head .head-title .btn .price-button 
{background-image: linear-gradient(to right, #FF9C71 0%, #FD3A69 70%); color: #fff; border-radius: 8px; 
  padding: 10px 58px; text-align: center; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);}
.head .head-title .btn .account-button, .new-store .store-content button
{background-image: linear-gradient(to right, #8B1074 30%, #6D2181 70%); color: #fff; border-radius: 8px; 
  padding: 10px 30px; text-align: center; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);}

/* FEATURES */
.features,.free, .setting, .profits, .section, .control, .carousel, .new-store {margin-top: 100px;}
.features .ftr .ftr-question {font-size: 20px; color: #6D2181;}
.features,.setting, .control, .new-store {overflow: hidden;}
.features .ftr h2 span, .section .section-title h2 span, .control .control-title h2 span, 
.new-store .store-content h2 span, .carousel h2 span
{padding-bottom: 10px;  border-bottom-style: solid; border-bottom-width: 5px; 
  border-image: linear-gradient(45deg, #fff, #8B1074, #6D2181) 1; line-height: 80px;}
.features .ftr .ftr-text{font-size: 20px; color: #808080; line-height: 40px;}
.features .feature 
{margin: 45px; text-align: center; box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1); 
  border-radius: 20px; padding: 50px 0px 10px 0px;}
.features .feature p{font-size: 16px; color: #808080;}

/* FREE */
.free .free-title button, .setting .setting-title button, .profits .profit-title button
{background-image: linear-gradient(to right, #FF9C71 0%, #FD3A69 70%); color: #fff; border-radius: 8px; 
  padding: 10px 30px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); text-align: center;}
.free .free-title h2 span 
{ display: inline-block; padding-bottom: 12px; border-bottom-style: solid; border-bottom-width: 6px; 
  border-image: linear-gradient(45deg, #fff, #FFD178,#FFB933) 1;}

/* SETTING */
.setting .setting-title h2 span 
{ padding-bottom: 12px; border-bottom-style: solid; border-bottom-width: 6px; 
  border-image: linear-gradient(45deg, #fff, #DF8FF4,#D56AF1) 1; line-height: 80px;}

/* PROFITS */
.profits .profit-title h2 span 
{ padding-bottom: 12px; border-bottom-style: solid; border-bottom-width: 6px; 
  border-image: linear-gradient(45deg, #fff, #FC8B74,#FC6E51) 1; line-height: 80px;}

/* SECTION */
.section {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.section .section-content { display: flex; flex-direction: column; align-items: center;}
.section .section-title h2, .new-store .store-content h2 {font-weight: bold;}
.section .section-title p, .new-store .store-content p {font-size: 20px; color: #808080;}
.section .section-content .icons {background-color: #6D2181; border-radius: 16px; padding: 14px; text-align: center; 
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 5px 30px rgba(0, 0, 0, 0.2);}
  .section .section-content .icons:hover {transform: rotate(360deg); }
.section .section-content p{font-size: 25px; font-weight: bold;} 

/* CONTROL */
.control .control-title .apps {font-size: 20px; color: #6D2181;}
.control .control-title .apps button {background-color: #6D2181; color: #fff;}

/* CAREOUSEL */
.carousel .arrows {border: 2px solid #8B1074; color: #8B1074; border-radius: 50px; padding: 5px 12px;}
.carousel .store-image {display: inline-block; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); padding: 20px 30px; border-radius: 65px;}
.carousel p {padding: 0 40px; line-height: 40px; font-size: 15px; color: #BDBDBD;}

/* FOOTER */
footer {margin-top: 80px;}
footer .foot{border-top: 1px solid #BDBDBD; padding: 20px;}
footer a{color: #8B1074; font-size: 15px;}
footer a:hover{color: #8B1074; text-decoration: none;}