@import 'reset.css';
@import '../fonts/GothamPro/stylesheet.css';
@import '../fonts/changa.css';
@import 'fonts.css';
@import 'main.css';
@import 'uniq.css';

#svg {
    height: 80%;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
}

.block1 #svg:hover #card {
    transform: rotate(-2deg);
    transform-origin: left bottom;
}

.block1 #svg:hover #plane {
    transform: translate(10px, -60px) rotate(2deg);
    transform-origin: center center;
}

.block1 #svg:hover #shoes {
    transform: translate(-40px, 40px);
    transform-origin: center center;
}

.block1 #svg:hover #ball {
    transform: translate(-30px, -40px);
    transform-origin: center center;
}

/* .block1:hover #not-ball {
    transform: translate(40px, 40px);
    transform-origin: center center;
} */

.block1 #svg:hover #anim2 {
    transform: translate(40px, 40px);
    transform-origin: center center;
}

.block1 #svg:hover #anim1 {
    transform: translate(40px, -10px);
    transform-origin: center center;
}

@media(max-width: 1380px) {
    #svg {
        width: 45%;
        right: 0px;
    }
}

@media(max-width: 1262px) {
    #svg {
        height: 75%;
        right: 0px;
    }
}

@media(max-width: 960px) {
    #svg {
        height: 70%;
        width: 50%;
        right: 0px;
    }
}

@media(max-width: 870px) {
    #svg {
        height: 50%;
        right: -50px;
    }
}

@media(max-width: 742px) {
    #svg {
        display: none;
    }
}

@media(max-width: 414px) {
    #svg {
        display: block;
        width: 100%;
        height: 40%;
        right: 0px;
    }
}

/*//*/

.nav-link {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	font-size: 24px;
	font-weight: 700;
	font-family: 'Gotham Pro', sans-serif;
}

.tab-pane h1 {
	font-size: 24px;
	font-weight: 700;
}

.tab-pane {
	font-family: 'Gotham Pro', sans-serif;
	margin: 50px 0;
}

.tab-pane h2 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 18px;
}

.tab-pane h3 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 18px;
}

.tab-pane li {
	font-size: 14px;
	margin-bottom: 15px;
	list-style: disc;
	margin-left: 50px;
	line-height: 22px;
}

.tab-pane p {
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
}

ul.sub-ul {
	margin-left: 35px;
}

ul.sub-ul li {
	list-style: circle;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	color: #C1F926;
	background-color: var(--bs-nav-tabs-link-active-bg);
	border-color: transparent;
	border-bottom: 2px solid #C1F926;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
	isolation: isolate;
	border-color: #fff;
	border-bottom: 2px solid #C1F926;
	color: #C1F926;
}

.nav-tabs {
    margin-top: 25px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-100 {
    margin-bottom: 100px;
}

.form-label {
    margin-bottom: .5rem;
    width: 100%;
}

label.error {
    width: 100%;
    margin-top: 5px;
    font-size: 80%;
    color: #dc3545;
    margin-bottom: 0;
    text-align: left;
}

.invalid-feedback {
    margin-top: 5px;
    font-size: 80%;
}

.iti__selected-flag {
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 6px 0 8px;
}

.iti.iti--allow-dropdown {
    width: 100%;
}

form#contact-form {
	margin-bottom: 100px;
}

@media screen and (max-width: 768px) {
    form#contact-form {
        margin-top: 100px;
		margin-bottom: 100px;
    }
}

#error-message {
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: #dc3545;
	margin-bottom: 5px;
}

p.redirect-msg {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 25px;
    text-align: left;
}

.payment-section {
	margin-top: 20px;
	border: 1px solid #ccc;
	padding: 20px;
	border-radius: 5px;
}
.payment-section h1 {
	font-size: 34px;
	margin-bottom: 20px;
	font-weight: 600;
}
.payment-section p {
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 5px;
}

/*// i info */
.wrap {
   background: #ECF0F1;
   color: #607D8B;
   height: 100%;
   overflow: auto;
   padding: 1em 2.5em;
   text-align: center;
   width: 100%;
}

pre {
   background: #fff;
   display: inline-block;
   font-size: .55em;
   margin-top: 2em;
   padding: 1em;
}

@media (min-width: 360px) {
   pre {
      font-size: .7em;
   }
}

@media (min-width: 500px) {
   pre {
      font-size: 1em;
   }
}

.tool {
    cursor: help;
    position: relative;
}

.tool::before,
.tool::after {
    left: 50%;
    opacity: 0;
    position: absolute;
    z-index: -100;
}

.tool:hover::before,
.tool:focus::before,
.tool:hover::after,
.tool:focus::after {
    opacity: 1;
    transform: scale(1) translateY(0);
    z-index: 100; 
}

.tool::before {
    border-style: solid;
    border-width: 1em 0.75em 0 0.75em;
    border-color: #000 transparent transparent transparent;
    bottom: 100%;
    content: "";
    margin-left: -0.5em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .2s .2s;
    transform:  scale(.6) translateY(-90%);
} 

.tool:hover::before,
.tool:focus::before {
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
}

.tool::after {
    background: #000000;
    border-radius: .5em;
    bottom: 180%;
    color: #EDEFF0;
    content: attr(data-tip);
    margin-left: -8.5em;
    padding: .5em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
    transform: scale(.6) translateY(50%);
    width: 18.5em;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
}

.tool:hover::after,
.tool:focus::after  {
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
}

@media (max-width: 760px) {
  .tool::after { 
	font-size: .9em;
	margin-left: -8em;
	width: 17em; 
  }
}