/* ========================================
+
+   Developer       : Rohit (rohitwebco@gmail.com)
+   Github          : https://github.com/rohitsraj12/
+   
+   Date            : May 2022
+   Project name    : 
+
===========================================*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Roboto:wght@100;300;400;500;700;900&display=swap');
/* 
    font-family:  'Open Sans', sans-serif; // normal text
    font-family: 'Roboto', sans-serif; //header text
*/

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

:root {
  --color-white: #ffffff;
  --color-theme: #0074d9;
  --color-dark: #111111;
  /* --color-theme: rgb(30, 132, 211); */
  /* link and button */
  --color-btn:  rgb(67, 210, 250);
  --color-link: rgb(67, 210, 250);

  /* Fonts */
  --font-primary: 'Roboto', sans-serif;
  --font-secondary: 'Open Sans', sans-serif;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-primary); 
  
}

body {
    color: #555555;
}

/* width */
::-webkit-scrollbar {
  width: 8px;
  background: rgb(219, 219, 219);
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgb(252, 252, 252);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #dcdcdc;
  box-shadow: inset 0 0 5px grey;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #969696;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

p, li {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
}

strong {
  font-weight: normal;
}

/* =============================
    
    base style

================================*/
.body__wrap {
    position: relative;
}

.wrap__container {
    width: 80%;
    margin: 0 auto;
}

.section__header {
    margin-bottom: 20px;
}

.list-check ul li::before{
    content: '\f00c';
    font-family: 'fontawesome';
    margin-right: 20px;
    color: var(--color-theme);
}


/* typography
================================ */
.primary__header {
    margin-top: 15px;
    font-family: var(--font-primary);
    font-size: 3rem;
    font-weight: 700;
    color: #222222;
}

.header__title {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 500;
    color: #555555;
}

.secondary__header {
    margin-top: 15px;
    font-family: var(--font-primary);
    font-size: 1.4rem;
    font-weight: 700;
    color: #323232;
}

.terteary__header {
    margin-top: 15px;
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 700;
    color: #323232;
}

.terteary__text {
  color: #414141;
  font-size: 0.9rem;
  line-height: 1.4rem;
}

/* button - 1
================================ */

@keyframes StarBackground {
    10% {
      background-color: rgba(255, 255, 255, 0.1);
      -webkit-filter: blur(1px);
      -moz-filter: blur(1px);
      -o-filter: blur(1px);
      -ms-filter: blur(1px);
      filter: blur(1px);
    }
    20% {
      background-color: rgba(255, 255, 255, 0);
    }
    40% {
      background-color: rgba(255, 255, 255, 0.05);
    }
    50% {
      background-color: rgba(255, 255, 255, 0);
    }
    60% {
      background-color: rgba(255, 255, 255, 0.3);
    }
    70% {
      background-color: rgba(255, 255, 255, 0);
      -webkit-filter: blur(2px);
      -moz-filter: blur(2px);
      -o-filter: blur(2px);
      -ms-filter: blur(2px);
      filter: blur(2px);
    }
    80% {
      background-color: rgba(255, 255, 255, 0.2);
    }
    90% {
      background-color: rgba(255, 255, 255, 0.1);
    }
    100% {
      background-color: rgba(255, 255, 255, 0.09);
    }
  }
  @keyframes StarBorderColor {
    10% {
      border-color: rgba(255, 255, 255, 0.1);
    }
    20% {
      border-color: rgba(255, 255, 255, 0.05);
    }
    40% {
      border-color: rgba(255, 255, 255, 0);
    }
    50% {
      border-color: rgba(255, 255, 255, 0.3);
    }
    60% {
      border-color: rgba(255, 255, 255, 0);
    }
    70% {
      border-color: rgba(255, 255, 255, 0.2);
    }
    80% {
      border-color: rgba(255, 255, 255, 0.7);
    }
    90% {
      border-color: rgba(255, 255, 255, 0);
    }
    100% {
      border-color: rgba(255, 255, 255, 0.4);
    }
  }
  
  .btn-star {
    position: relative;
    background-color: rgba(27, 127, 215, 0.03);
    padding: 10px 30px;
    display: block;
    max-width: 140px;
    /* margin: 0 auto; */
    color: rgb(0, 119, 146);
    font-family: var(--font-primary);
    font-weight: 500;
    transition: color 0.5s ease, background-color 0.1s ease;
  }
  .btn-star .top_left,
  .btn-star .top_right,
  .btn-star .bottom_left,
  .btn-star .bottom_right {
    width: 10px;
    height: 10px;
    position: absolute;
  }
  .btn-star .bottom_right,
  .btn-star .bottom_left {
    bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  .btn-star .top_left,
  .btn-star .top_right {
    top: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
  }
  .btn-star .top_left,
  .btn-star .bottom_left {
    left: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
  }
  .btn-star .top_right,
  .btn-star .bottom_right {
    right: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
  }
  .btn-star:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    top: 0;
    left: 0;
    transition: border-color 0.2s ease;
  }
  .btn-star:hover {
    -webkit-animation: StarBackground 0.5s;
    /* Safari 4.0 - 8.0 */
    animation: StarBackground 0.5s;
    background-color: rgb(8, 79, 118);
    color: white;
  }
  .btn-star:hover .top_left,
  .btn-star:hover .top_right,
  .btn-star:hover .bottom_left,
  .btn-star:hover .bottom_right {
    border: none;
  }
  .btn-star:hover:before {
    border-color: rgba(255, 255, 255, 0.4);
    -webkit-animation: StarBorderColor 1s;
    /* Safari 4.0 - 8.0 */
    animation: StarBorderColor 1s;
  }

  /* ==========================
  
    Aside section
  
  =============================*/
.aside__social-media {
padding-top: 10px;
}

.aside__social-media li + li {
  margin-left: 20px;
}

.aside__social-media a {
  font-size: 1.2rem;
  color: var(--color-theme);
  transition: ease-in-out 300ms;
  -webkit-transition: ease-in-out 300ms;
  -moz-transition: ease-in-out 300ms;
  -ms-transition: ease-in-out 300ms;
  -o-transition: ease-in-out 300ms;
}

.aside__social-media a:hover {
  color: #0d1315;
  transform: scale(1.06);
  -webkit-transform: scale(1.06);
  -moz-transform: scale(1.06);
  -ms-transform: scale(1.06);
  -o-transform: scale(1.06);
}
  

/* ====================================

  body footer

=======================================*/
.section__footer-header {
  color: #fff;
  font-size: 1.3rem;
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #4f4f4f;
}

.footer__link {
  color: rgb(232, 232, 232);
  transition: ease-in-out 300ms;
  -webkit-transition: ease-in-out 300ms;
  -moz-transition: ease-in-out 300ms;
  -ms-transition: ease-in-out 300ms;
  -o-transition: ease-in-out 300ms;
}

.footer__link:hover {
  padding-left: 10px;
  color: var(--color-theme);
}


.body__footer p {
  color: #c2c2c2;
}

.body__footer {

  /* background: rgb(174,39,132);
  background: linear-gradient(90deg, rgba(174,39,132,1) 0%, rgba(239,75,89,1) 100%);  */
  border-top: 2px solid rgba(174,39,132,1);
  padding-top: 30px;

  /* background-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23292929' fill-opacity='0.45'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); */

  
  background-color: #0d1315;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='24' viewBox='0 0 12 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23074d56' fill-opacity='0.1'%3E%3Cpath d='M2 0h2v12H2V0zm1 20c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM9 8c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-1 4h2v12H8V12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

} 


.footer__logo {
  height: 100px;
}

.footer__list {
  margin-bottom: 5px;
}

.footer__social-list + li {
  margin-left: 10px;
}

.footer__social-link {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-theme);
  background-color: transparent;
  color:var(--color-theme) !important;
  text-align: center;
  line-height: 40px;
  transition: ease-in-out 300ms;
  -webkit-transition: ease-in-out 300ms;
  -moz-transition: ease-in-out 300ms;
  -ms-transition: ease-in-out 300ms;
  -o-transition: ease-in-out 300ms;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.footer__social-link:hover {
  color: #ffffff !important;
  background-color: var(--color-theme);
  padding-left: 0;
}

.footer__list span {
  display: inline-block;
  width: 25px;
  color: #fff;
}

.footer__bottom {
  background-color: #000000e7;
  padding: 10px 0 0;
  border-top: 1px solid rgb(40, 40, 40);
}