@import url(https://ads.aramin.media/wp-content/plugins/araminform/webinar9/assets/css/font.css);

    
body {
	font-family: IRANSansX  !important;
	color: #202020;
}


  
.bgr {background-color:#272F72;}
.btnc:hover {
    background-color:#272F72;
   
    
.no-padding-section {
  padding: 0 !important;
}


body::before, body::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2); 
  z-index: -1; 
}

body::before {
  width: 300px;
  height: 300px;
  top: 10%;
  left: 15%;
  animation: moveCircle1 10s infinite;
}

body::after {
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  animation: moveCircle2 12s infinite;
}

@keyframes moveCircle1 {
  0% {
    top: 10%;
    left: 15%;
  }
  50% {
    top: 70%;
    left: 30%;
  }
  100% {
    top: 10%;
    left: 15%;
  }
}

@keyframes moveCircle2 {
  0% {
    top: 50%;
    left: 50%;
  }
  50% {
    top: 20%;
    left: 80%;
  }
  100% {
    top: 50%;
    left: 50%;
  }
}

      html {
        scroll-behavior: smooth;
      }


         .text-justify1 {
        text-align: justify;
        text-justify: inter-word;
        word-spacing: 0.5px; 
        letter-spacing: normal; 
      }

      .animate-fade-in {
        animation: fadeIn 0.3s ease-out;
      }
    
      .animate-slide-up {
        animation: slideUp 0.3s ease-out;
      }
    
      @keyframes fadeIn {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
      }
    
      @keyframes slideUp {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
}

@theme {
    --color-black: #202020;  
    --color-white: #FFFFFF;  
    --color-background: #F7F7F7;
    --color-primary-gray: #939598;  
    --color-gray-20: #F3F3F3;  
    --color-gray-50: #E9E9E9;  
    --color-gray-100: #E2E2E2;  
    --color-gray-200: #D5D5D5;  
    --color-gray-300: #C9C9C9;  
    --color-gray-400: #BCBCBC;  
    --color-gray-500: #AFAFAF;  
    --color-gray-600: #939393;  
    --color-gray-700: #777777;  
    --color-gray-800: #5B5B5B;  
    --color-gray-900: #3F3F3F;  
    --color-primary-20: #F0F7FD;  
    --color-primary-50: #DDEBF7;  
    --color-primary-100: #D3E5F5;  
    --color-primary-200: #BFDBF0;  
    --color-primary-300: #ABCFEC;  
    --color-primary-400: #98C3E7;  
    --color-primary-500: #84B8E3;  
    --color-primary-600: #6F9BBF;  
    --color-primary-700: #5A7D9A;  
    --color-primary-800: #456076;  
    --color-primary-900: #304252;  
    --color-secondary-20: #FFF2F5;  
    --color-secondary-50: #FDE9EE;  
    --color-secondary-100: #FCE3E9;  
    --color-secondary-200: #FBD7DF;  
    --color-secondary-300: #FACCDA;  
    --color-secondary-400: #F8BECB;  
    --color-secondary-500: #F7B2C2;  
    --color-secondary-600: #CF96A3;  
    --color-secondary-700: #A87984;  
    --color-secondary-800: #805D65;  
    --color-secondary-900: #594A46;  
      
    }

.no-padding-section {
  padding: 0 !important;
}


body::before, body::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2); 
  z-index: -1; 
}

body::before {
  width: 300px;
  height: 300px;
  top: 10%;
  left: 15%;
  animation: moveCircle1 10s infinite;
}

body::after {
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  animation: moveCircle2 12s infinite;
}

@keyframes moveCircle1 {
  0% {
    top: 10%;
    left: 15%;
  }
  50% {
    top: 70%;
    left: 30%;
  }
  100% {
    top: 10%;
    left: 15%;
  }
}

@keyframes moveCircle2 {
  0% {
    top: 50%;
    left: 50%;
  }
  50% {
    top: 20%;
    left: 80%;
  }
  100% {
    top: 50%;
    left: 50%;
  }
}

      html {
        scroll-behavior: smooth;
      }


         .text-justify1 {
        text-align: justify;
        text-justify: inter-word;
        word-spacing: 0.5px; 
        letter-spacing: normal; 
      }

      .animate-fade-in {
        animation: fadeIn 0.3s ease-out;
      }
    
      .animate-slide-up {
        animation: slideUp 0.3s ease-out;
      }
    
      @keyframes fadeIn {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
      }
    
      @keyframes slideUp {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }