@import url('https://fonts.googleapis.com/css?family=Cormorant+Unicase|Unica+One');
/*
font-family: 'Unica One', cursive;
font-family: 'Cormorant Unicase', serif;
*/
@import url('https://techsoul.in/assets/css/Glyphter.css');
/*@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Unica+One&display=swap');


/*
font-family: 'Poppins';
*/
:root { 
	--c1 : #ffffff;
	--c2 : #b6aaf2;
	--c3 : #000;
/*	--c4 : #743ad5;    */
    --c4 : #610bf2;
	--c5 : rgba(0,0,0,.1);
    --c6 : #d53a9d;
    --c7 : rgba(0,0,0,.7);
    --c8 : rgba(255,255,255,.6);
    --c9 : #212121;
	--btn-color: var(--c2)!important;
    --grad1 : linear-gradient(to left, #743ad5, #d53a9d);
    --radius : 12.5px!important;
}

.c1 { background:var(--c1); }
.c1-text { color:var(--c1); }

.c2 { background:var(--c2); }
.c2-text { color:var(--c2); }

.c3 { background:var(--c3); }
.c3-text { color:var(--c3); }

.c4 { background:var(--c4); }
.c4-text { color:var(--c4); }

.c5 { background:var(--c5); }
.c5-text { color:var(--c5); }

.c6 { background:var(--c6); }
.c6-text { color:var(--c6); }



.logo,.unica-one,*[data-content="TechSoul"],*[data-content="TECHSOUL"] {
  font-family: 'Unica One', sans-serif;
} {
  font-family: "Unica One", sans-serif;
  font-weight: 400;
  font-style: normal;
}


html { scroll-behavior: smooth; } 

header { position: sticky; top:0px;  padding-left:0px!important; padding-right:0px!important; z-index:9; }

.mainhero { min-height:70vh; }
.mainhero .content { background: rgba(0,0,0,.9); min-width:320px; border-radius: var(--radius); margin-top: 1em; margin-bottom: 1em; }
/* -- -- */
.btn { background: var(--grad1); justify-self: center; }
.btn-container { display: grid; position:sticky; top:100px; }
.btn.outline { background: transparent; position: relative; z-index:1; min-width:120px; }
.btn.outline > span { z-index:1; }
.btn.outline::before { position: absolute;
    content: '';
    top: -4px; bottom: -4px;
    left: -4px; right: -4px;
    background: var(--grad1);
    z-index: -1;
    border-radius: var(--radius); 
     overflow: visible; 
     transition: .5s all;  
   }

.btn.outline::after 
   { 
    position: absolute;
    content: '';
    top: 1px; bottom: 1px;
    left: 1px; right: 1px;
    background:#000;
    z-index: 0;
    border-radius: var(--radius);
    overflow: hidden; 
   }   

.outline.btn:hover { box-shadow: 0 0 20px 2px var(--c4); }   
.btn:hover { box-shadow: 0 0 20px 2px var(--c4); }   
.outline.btn:hover::after { background:#000!important;     top: 2px; bottom: 2px;
    left: 2px; right: 2px; }

.outline.btn:hover::before {  transform: rotate(180deg);  }
.btn.outline i { color:rgba(255,255,255,.5); }
/* -- -- */
.mainhero { background-image:url('../img/sideshow.png'); background-size:100% cover; background-repeat: no-repeat; background-attachment: fixed;  background-position: top right; animation:justmove 60s ease-in-out infinite; }

@keyframes justmove {
    0% { background-position:top right; }
    100% { background-position:bottom right; }
}


.mainsec-1,.mainsec-2,.mainsec-3  { padding-top:5em; padding-bottom: 5em; }

/* // --- // */
.mainsec-1 { background:#743ad50a; color:rgba(0,0,0,.9); }
.mainsec-1 .border-right strong { color:var(--c4); }
.mainsec-1 .border-right { border-right:1px solid var(--c5); padding-right:5em; }
.mainsec-1 .border-right h5 { font-weight: 600; }
.mainsec-1 i::before { font-size:3em; color:var(--c4); }
.mainsec-1 small { color:rgba(0,0,0,.4) }

/* // --- // */

.mainsec-3 { background:var(--c3); color:var(--c1); }
.mainsec-3 .tabs li.active { border-bottom:3px solid var(--c4);  }
.tabs { scrollbar-color: var(--c8) var(--c3);  scrollbar-width:none; -ms-overflow-style: none; 
overflow: hidden;
max-width: 90vw;
margin:0 auto;
overflow-x: auto;
}
.tabs li > a { display:block; }
.mainsec-3 .tabs li { position: relative; color:var(--c8); border-bottom: 1px solid var(--c8); white-space: nowrap; }
.mainsec-3 .tabs li strong { color:var(--c2); }
.highlighter { position: absolute; font-size:1.2em; margin-left:1em; top: 0; right: 0; color:var(--c6);  border-radius:var(--radius);  }
.highlighter.text { font-size: .6em;  }

.overf { overflow: hidden; overflow-x: auto; }
.tabs a .dis { pointer-events: none; }

.imgbcanvas  { position:relative; display:grid; grid-template-columns:auto 1fr; }
.imgbcanvas img { position:sticky; top:0; left:0; transition:1s all; }
.imgbcanvas img.female { left:500px; }
.imgbcanvas img.male { left:0px; }

.mainsec-2 { color:rgba(0,0,0,.9); }
.mainsec-2:hover img.male { animation:fadeInDown .5s; }
.mainsec-2:hover img.female { animation:zoomIn 1s; }



.mainsec-4 { background:#f9f7fe; color:rgba(0,0,0,.9); }
.mainsec-4 .slider img.circle { width:min(300px, 400px); height:min(300px, 400px); }
.mainsec-4 .slider .slider-controls { position:absolute; bottom:2em; left: calc(15% + 40px); overflow:visible; 
top:80%; opacity:1; background: rgba(255,255,255,.5); min-height: 50px; width: 100px; border-radius: 50px;
}
.mainsec-4 .slider .slider-controls .slider-prev, .mainsec-4 .slider .slider-controls .slider-next {
  background: transparent !important;
  min-height: 50px;
  min-width: 50px;
  padding: 0px;
}

.slider .slider-controls .slider-prev, .slider .slider-controls .slider-next {
    color: rgba(127, 58, 206, 0.77)!important;
    opacity:.5;
}

.mainsec-4 .slider small { color:rgba(0,0,0,.5); }
.mainsec-4 .slider p { color:rgba(0,0,0,.9); }
.mainsec-4 .slider strong { color:var(--c4); color: #610bf2; }

.mainsec-5 { background:var(--c4); color:rgba(255,255,255,.9); }

footer { background:var(--c9);
  color: var(--c1);
  font-weight: 600; }

.modal .modal-container {
    width: 95%!important;
    position: absolute;
    bottom: 0;
    animation: slideInUp .3s;
    padding:0px!important;
}

.modal .modal-header { padding: 1em; border-bottom: 1px solid rgba(0,0,0,.1); }
.modal .modal-body { max-height:calc(90vh - 200px); overflow: hidden; overflow-y: auto; }

.bottomsticky { position:sticky; bottom:0; padding:1em 2em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.92) 48%, rgb(255, 255, 255) 100%); }
.modcont { display:grid; grid-template-columns:2fr 1fr; gap:1em; padding:1em 2em;  }

ul.tabs { background: var(--c1)!important; font-weight: 500; }
ul.tabs li { border-right:1px solid var(--c4); }
ul.tabs li a *,ul.tabs li a { font-weight:600; color:var(--c4)!important; }
ul.tabs li.active { background:var(--c4)!important; }
ul.tabs li.active a *,ul.tabs li.active a { color:white!important; font-weight:600; }

/* Form Wizard */

.formwizard {
    min-width:320px;
    width: inherit;
    min-height: 320px;
    display: grid;
    align-items: center;

    background: var(--c1); 
    padding: 1em 2em;
    border-radius: var(--radius);
    box-shadow: 0px 10px 10px -1px rgba(0,0,0,.1);

    position: relative;
}

.formwizard input,.formwizard select { min-height:70px!important; font-size:2em!important; }
.formwizard select { padding-top:.3em!important; }

.formwizard .btn-group { width:100%; display:grid; grid-template-columns:100px 1fr; }
.formwizard .btn-group > span { margin:0px; width:100%; padding: .8em 1em; }
.formwizard .btn-group > a { background:var(--c3); }
.formwizard h5 { text-align:center; color:var(--c6); }

.formwizard .progress-bar {
  height: 5px;
  width: 0%;
  background-color: var(--editable_status_active);
  border-radius: 25px;
  transition: width 1s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0.8;
}


/* Review */

.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    padding: 10px;
}

.star {
    font-size: 50px;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.star:hover ~ .star,
.star.active ~ .star {
    color: #ddd;
}

.star:hover,
.star:hover ~ .star,
.star.active,
.star.active ~ .star {
    color: #f39c12;
    transform: scale(1.1);
}


.rating-container { position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; justify-self:center; }
.ratingtag { font-size:2em; padding-left:.5em; color: #f39c12; }
 

/* = Loading =  */
body.loading > * { display:none; }
body.loading::after {  content:""; 
  background-image: linear-gradient(33deg, rgba(134,134,134,1) 0%, rgba(255,255,255,1) 22%, rgba(140,137,137,1) 100%);
  animation:loadingpage 1s infinite ease-in-out;  transition:1s all ease-in-out; margin:0 auto; display: grid; background-size:100%; justify-content:center; align-items: center;
  color:rgba(0,0,0,.7); position:fixed; top:0; left:0; right:0; bottom:0; z-index:99; width:100%; height:100%; 
}

@keyframes loadingpage {
  0% {   transform:rotate(0deg) scale(2); }
  100% {   transform:rotate(360deg) scale(4); }
}

/* == */

@media (max-width: 820px){
    .mainhero .content { padding:2em; }
    .mainsec-1 .border-right strong { display: inline-grid;  }
    .mainsec-1 .border-right { text-align: center; padding-right:unset; padding:1em;}    
    .mainsec-4 .slider .slider-controls { position: sticky; bottom: 1em; left: calc(50vw - 50px); }
    .btn-container { bottom:.5em; }
    .btn-container i { font-size: .9em; }
    header::after { position: absolute; top: 5px; right: .5em; }
    .modcont { grid-template-columns:1fr; gap:1em; }
}