@charset "utf-8";
/* CSS Document */

/* Begin Font  */


@font-face {
    font-family: 'Chronicle Display';
    src: url('../fonts/ChronicleDisplay-Black.eot');
    src: url('../fonts/ChronicleDisplay-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ChronicleDisplay-Black.woff2') format('woff2'),
        url('../fonts/ChronicleDisplay-Black.woff') format('woff'),
        url('../fonts/ChronicleDisplay-Black.ttf') format('truetype'),
        url('../fonts/ChronicleDisplay-Black.svg#ChronicleDisplay-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MontserratRegular';
    src: url('../fonts/Montserrat-Regular.eot');
    src: url('../fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat-Regular.woff2') format('woff2'),
        url('../fonts/Montserrat-Regular.woff') format('woff'),
        url('../fonts/Montserrat-Regular.ttf') format('truetype'),
        url('../fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MontserratSemiBold';
    src: url('../fonts/Montserrat-SemiBold.eot');
    src: url('../fonts/Montserrat-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat-SemiBold.woff2') format('woff2'),
        url('../fonts/Montserrat-SemiBold.woff') format('woff'),
        url('../fonts/Montserrat-SemiBold.ttf') format('truetype'),
        url('../fonts/Montserrat-SemiBold.svg#Montserrat-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Regular.eot');
    src: url('../fonts/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MyriadPro-Regular.woff2') format('woff2'),
        url('../fonts/MyriadPro-Regular.woff') format('woff'),
        url('../fonts/MyriadPro-Regular.ttf') format('truetype'),
        url('../fonts/MyriadPro-Regular.svg#MyriadPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'Cormorant Garamond SemiBold';
    src: url(../fonts/CormorantGaramond-SemiBold.ttf);
   
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond Bold';
    src: url(../fonts/CormorantGaramond-Bold.ttf);
   
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond Regular';
    src: url(../fonts/CormorantGaramond-Regular.ttf);
   
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family:"Poppins Light";
    src: url(../fonts/Poppins-Light.ttf);
   
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}








/* common tag style ------------------------------*/
:focus{outline:none;}
body{margin:0; font-size:15px; color:#333333;overflow-x:hidden; font-family: var(--paragraph); }
h1{font-size:36px; color:#000;font-family:var(--mainTitle1);text-transform: capitalize; ;}
h1 span{font-family:var(--mainTitle1);}
h2{font-size:24px; color:#242424;}
h3,h4,h5,h6{text-transform:uppercase;   font-family: var(--title2SemiBld);color:#666;}
h6{font-size:14px; color:#333333;}
a{color:#333333;outline:none!important;}
a:hover,a:focus{color:var(--themeTxt);}
p {font-size: 16px;  color: #000;line-height:30px;font-family:var(--paragraph);font-size: clamp(13px,2vw,16px);}
.btn{background:#600a93; color:#fff; border-radius:0px; border-radius: 5px; font-size: 14px;}
.btn:hover{ color: #fff;}
.btn:hover i{ color:#fff;}
.anim{transition:.3s all ease-in-out 0s; -moz-transition:.3s all ease-in-out 0s;-webkit-transition:.3s all ease-in-out 0s; -o-transition:.3s all ease-in-out 0s;}
.white{color:#fff;}

:root{--themeTxt:#600a93;
      --themeBg:#600a93;
      --paragraph: "Poppins Light";
      --mainTitle1:"Poppins Light";
      --title2Regular: "Poppins Light";
      --title2SemiBld:  "Poppins Light";
    }
/*------------------------------------*/


.btn {display: inline-block; color: white;cursor: pointer;position: relative;background-color: transparent;text-decoration: none;overflow: hidden;z-index: 1;}
.btn::before {content: "";position: absolute;left: -1px;top: 0;width: 101%;height: 100%;background:var(--themeBg); transform: translateX(-100%); transition: all .3s; z-index: -1;   }
.btn:hover::before {transform: translateX(0);}


.nav-up {top: -9em; overflow: hidden;}
.nav-down{background: #000;}
.menuSection,.subMenu{margin:0; padding:0; list-style:none;} 
.menuSection li i {vertical-align: top; margin: 2px 0 0 2px;}
ul.subMenu {display:none;  background: #2b2a2a;}
.subItem.open .subMenu{display: block;}
.subMenu li a { font-size: 14px; padding: 5px 8px 5px 32px;}


.wrapper{min-height:800px;}
.container-fluidCustom {width: min(1400px,85%); margin: 0px auto;}

.menuSec1{z-index: 100;}
header {width: 100%;    top: 0;z-index: 10;background: none;padding:0;   margin: 0;position: fixed; top:0;background: none;}
.headerSec {display: flex;flex-wrap: nowrap;    height: 80px;     align-items: center;   margin-top: -2px;margin-top:0px; margin-bottom: 0;}
.logo {flex: 1 0 0;max-width: 150px;    z-index: 10; padding-top:30px;}
.logo img{max-width: 100%;}
.menuIcon{background: url(../images/menu-icon.png) no-repeat scroll center center;width: 50px;height: 50px;display: block;cursor: pointer;}
.menuIcon:hover,.menuIcon:focus {opacity: .7;}
.topMenuSc {margin-left: auto;}

.carousel-item img{height:100vh; object-fit: cover;}

.menuOpRe,.menuOpRw,.menuOpCol { height: 100%;}
.menuItemsOpen {position: fixed;right: 0;background: var(--themeBg); opacity:.8; width: 100%;height:100%;padding: 15px;border-radius: 2px; display: none; z-index: 1000;top:0;}
.menuItemsOpen ul {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;align-items: center;justify-content: center; height: 100%;}
.menuItemsOpen ul li a {font-size: 40px;font-family: var(--title2Regular);padding: 20px;display: block;color: #fff; text-decoration: none;text-align: center;text-transform: uppercase;}
.menuItemsOpen ul li a:hover,.menuItemsOpen ul li a:focus {color: #FFBF00;}
.menuClose {display: block;display: flex;justify-content: flex-end;font-size: 35px;padding-right: 20px;color: #eee; cursor: pointer;}
.menuClose:hover{opacity:.7;}



#cssmenu > ul > li > a{color:var(--themeTxt); font-size:16px; border:none; font-family: var(--fontBold);margin: 0px 10px;}
#cssmenu > ul > li:hover > a, #cssmenu ul li.active a{color: #000 !important; }
#cssmenu > ul > li:hover > a{color: #000 !important;}
#cssmenu > ul{margin-top:0px;}
#cssmenu > ul{margin-left:0; float:none;margin-left: -18px;}
#cssmenu > ul > li{margin:0;}
#cssmenu ul ul li a{ font-family: Arial, Helvetica, sans-serif;}



.sticky {box-shadow: -2px -4px 31px 1px #545454; position: fixed;  width: 100%;  top: 0;  z-index: 100;  background:#101115; transition: .5s linear 0s;}
.sticky+.homeSlider { margin-top: 0px;}

.contactIco{width:50px; height:50px; background: url(../images/contactIco.png) no-repeat scroll center center;}
.conactLabel label {background: red;display: flex; align-items: center; justify-content: flex-start; border-radius: 4px;  margin-top: 10px;  height: 43px;  width: 80%; margin-left: auto;}
.conactLabel span {font-size: 13px; color: #fff; line-height: 15px; font-family: 'LatoBold';}

.carousel-caption { text-align: left;margin-bottom: 14em;top:6%;   left: 0;  right: 0;}
.carousel-caption h4 {text-transform: uppercase;font-size: 14px;   letter-spacing: 2px;}
.carousel-caption h3{font-size: 48px; color: white; font-family: 'Roboto Black'; margin:0;}

.carousel-indicators{display: flex;flex-wrap: nowrap;margin: 0px auto;z-index: 8;bottom: 0em;left: 25px;justify-content:center;}
.carousel-indicators li{height: 4px;width:100px;margin-right: 2px;border-radius: 0; opacity: .8; margin-right: 2px;border-radius: 0; }
.carousel-indicators li.active{background-color:var(--themeBg); opacity: 1;}
.carousel-caption { display: block;  max-width: 600px;  left: -23%;  padding: 2em;   height: 135px;}
.carousel-caption h4 { font-size: 48px; line-height:56px;  color: #000; font-family: var(--fontBold);  margin: 0;}
.carousel-caption h5 { font-size: 32px; font-family: var(--fontBold); color: #000;}

section.secPad.futrStudy.workPg.bgblack {
    padding-top: 102px !important;
    background: #000 !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
}

.secPad {padding:1em 0;}

.abSliderSec .carousel-item {max-width: 60%;padding-bottom: 3em;}
.abSliderSec .carousel-item img {height: 100%;}
.abSliderSec {position: relative;}
.abSliderSec .carousel-caption {right: 7%;left: initial;background: #fff;height: 81%;width: 50%;max-width: 50%;}
.abSliderSec::after {background: var(--themeBg);content: "";width: 69%;height: 100%;display: block;top: 0;position: absolute;right: 0;z-index: -1; background: url(../images/hmServiceBG.png) no-repeat scroll center center;
background-size: cover;}
.abSliderSec .carousel-indicators {width: 60%;left: 0;justify-content: flex-end;margin: 0;bottom: 5em;max-width: 100%;padding-right: 3em !important; display: none;}
.abSliderSec .carousel-indicators li {width: 15px;height: 15px;border-radius: 100%;border: 5px solid #600a93;background: no-repeat;}
.abSliderSec .carousel-indicators li.active {background: var(--themeBg);}
.abSliderSec .carousel-caption h5 {font-size: 24px;font-family: var(--title2SemiBld);font-size: clamp(10px,3vw,24px); line-height:32px;}
.abSliderSec .carousel-caption h4 {font-family: var(--mainTitle1);text-transform: capitalize;color: #000;margin-bottom: 19px;font-size: clamp(25px,4vw,48px);line-height: clamp(33px,4vw,56px);}
.abSliderSec .carousel-caption p {font-size: 16px;line-height:24px;font-size: clamp(12px,2vw,16px);}
.learnMrBtn {font-weight: bold;color: #000;background: no-repeat;border: 1px solid #600a93;border-radius: 0;font-size: 16px; font-size: clamp(12px,2vw,26px);font-family: var(--title2SemiBld); padding: 5px 20px;}
.learnMrBtn i {color: var(--themeBg);}

.headingSec {width: 80%;margin: 0px auto;margin-bottom: 5em;}
.headingSec h4,.hdSecConComman h4 {font-family: var(--title2SemiBld);font-size: clamp(24px,3vw,24px); line-height: clamp(16px,3vw,32px); color:#000; text-underline-position: under;}
.headingSec h1,.hdSecConComman h1 {font-family: var(--mainTitle1);text-transform: capitalize;color: #000;margin-bottom: 19px;font-size: clamp(25px,4vw,48px);line-height: clamp(33px,4vw,56px);}
span.headingDot {color: var(--themeBg);}

.mainGridRow { padding-right: 4em;}
.TwoColGridRow {display: flex;gap: 2em;margin-bottom: .5em;}
.leftArTi{width:105px; height:30px; background: url(../images/arrow-leftTi.png) no-repeat scroll center center; display: block; background-size: contain;margin-bottom: 1em;transition:.3s all ease-in-out 0s;}
.gridColRow  h4 {color: #000;text-transform: capitalize;font-size: clamp(14px,3vw,32px); line-height:40px;}
.gridColRow  h3 {color: #000;text-transform: uppercase;font-size: clamp(18px,2vw,28px);}
.gridColRow  h3:hover {color:var(--themeBg); text-decoration:underline;}
.pr1Col-1 {flex: 1 0 0;}
.pr1Col-1 img {width: 100%;}
.pr1Col-2 {flex: 1 0 0;}
.pr1Col-1 figure,.pr1Col-2 figure{position: relative; overflow: hidden;transition:.3s all ease-in-out 0s; cursor:default;}

.imgHoverCont {transition:.6s all ease-in-out 0s;position: absolute;bottom: 0;background:rgba(96, 10, 147,.5);padding: 30px 25px;opacity:0;width: 100%;margin: 0px auto;
left: 0;right: 0;bottom: 0;border-radius: 0; height:100%;transform: translate3d(0px, 100%, 0px) scaleX(1.1)skew(94deg, 141deg);}
.pr1Col-1 figure:hover img,.pr1Col-1 figure:hover img{opacity:1;}
.pr1Col-1 figure:hover .imgHoverCont,.pr1Col-2 figure:hover .imgHoverCont{opacity: 1;  transform: translate3d(0px, 0, 0px) scaleX(1);}

.imgHoverCont h3{color:#fff; text-transform: capitalize;}
.prContBx {margin-bottom: 30%;transition:.3s all ease-in-out 0s;}
.prContBx:hover{cursor: default;}

.prContBx:hover .leftArTi{background-position: 0;}
.imgRightGrid .prContBx:hover .leftArTi{background-position:right;}
.pr1Col-1:hover+.pr1Col-2 .prContBx>.leftArTi{background-position: left;}
.imgRightGrid .pr1Col-1:hover+.pr1Col-2 .prContBx>.leftArTi{background-position: right;}

.img-1Flex{flex: 1 0 33%;max-width: 33%;}
.img-2Flex{max-width: 66%;flex: 1 0 82%;}
.imgRightGrid .pr1Col-1 {order: 2;flex: 1 0 70%;max-width: 70%;}
.imgRightGrid .pr1Col-2 {text-align: right;}
.imgRightGrid .leftArTi {margin-left: auto;}
.imgRightGrid .leftArTi{width:105px; height:30px; background: url(../images/arrow-rightTi.png) no-repeat scroll center center; display: block; background-size: contain;}

.btnRow {display: flex;justify-content: center;margin: 4em auto;}

.hmService{background: url(../images/hmServiceBG.png) no-repeat scroll center center; display: block;background-size: cover;}
.subTiTop{font-family: var(--title2SemiBld);font-size: clamp(10px,3vw,24px); line-height:32px; color:#000;}
.subTiTop.white{color:#fff;}
.mainTiBig{font-family: var(--mainTitle1);text-transform: capitalize;color: #000;margin-bottom: 19px;font-size: clamp(25px,4vw,48px);line-height: clamp(33px,4vw,56px);color:#000; font-weight:bold;}
.mainTiBig.white{color:#fff;}
.mainTiBig.white span{color:#000;}
.hmSerSecBx {padding-left: 10%;    margin: 2em 0;}
.hmSerRow {display: flex;gap: 20px;margin-top: 2em;}
.hmSerLeft {flex: 1 0 30%;max-width: 30%;}
.hmSerRight {flex: 1 0 0;}
.hmSerLeft p {color: #fff;}
.hmSerLeft li {font-size: clamp(19px,2vw,32px);font-family: var(--mainTitle1);color: #fff; position: relative;display: flex;align-items: flex-start;vertical-align: top;}
.hmSerLeft li::before{background: url(../images/liIcon.png) no-repeat scroll center center; display: block;width: 30px;height: 12px;content: "";margin-right: 13px;flex: 1 0 30px;max-width: 30px;    margin-top: 18px;}
.hmSerLeft li a{color:#fff; text-decoration: none;}
.hmSerLeft li a:hover{opacity:.7;}
.hmSerLeft ul {list-style: none;padding: 0;}
.hmSerRight img {width: 100%; display: none;}

.ideSecRow {display: grid;grid-template-columns: 1fr 1fr;}
.ideSecCol img {width: 100%;transition: .3s all ease-in-out 0s;}
.ideSecCol figure{transition: .3s all ease-in-out 0s; overflow: hidden; position: relative;}
.ideSecCol figure:hover img {transform: scale(1.1);}
.ideSecCol:hover > figcaption{transform: scale(.8);}
.ideSecCol .colContent:hover > figcaption{transform: scale(.8);}
.ideSecCol figure:hover .imgHoverCont{opacity: 1;transform: translate3d(0px, 0, 0px) scaleX(1);}

.ideSecCol.ideTxt {padding-top: 5em;padding-bottom: 2em;}
.ideSecCol {position: relative;}
.ideSecCol figcaption {position: absolute;bottom: 0;background: #fff;padding: 20px;transition: .3s all ease-in-out 0s;}
.ideSecCol figcaption h6 {font-size: clamp(13px,2vw,25px);color: var(--themeBg);margin: 0;}
.ideSecCol figcaption h5 {font-size: clamp(17px,3vw,50px);text-transform: capitalize;font-family: var(--mainTitle1);color: #000;}
.insideCol-1 {margin-top: 20em;padding-right: 3em;}
.colCTitle {margin-left: 30%;}
.colContent {position: relative;}
.insideCol-2 {margin-top: 4em;}
.insideCol-4 {margin-top: 3em;}


.footer{background:var(--themeBg);padding:3em 1em; background: url(../images/footerBg1.png) no-repeat scroll center center; background-size: cover;}
.gtLeft h2 {color: #fff;font-size: clamp(18px,4vw,60px);font-family: var(--title2Regular);}
.gtLeft h6 {color: #fff;font-size: clamp(12px,2vw,25px);text-transform: capitalize;font-family: var(--title2Regular);}
.ftrGetTch {display: flex;align-items: center;padding-bottom: 4em;border-bottom: 1px solid #eee;margin-bottom: 5em;}
.gtLeft {flex: 1 0 0;}
.gtRight {flex: 1 0 30%; max-width:30%;display: flex;justify-content: flex-end;}
.getTchBtn {background: #fff;color: #000;text-transform: capitalize;height: fit-content;font-size: clamp(12px,2vw,30px);font-family: var(--title2SemiBld); padding: 15px 20px; border-radius: 0;}
.getTchBtn:hover,.getTchBtn:focus{background: #000;}
.getTchBtn::before {background: #000;}
.footer .container-fluid, .ftrCpySec .container-fluid {max-width: 1550px;}

.footerMenuRow {border: 1px solid #acaeb4; margin-bottom: 2em;}
.footerRow {display: flex;gap: 20px;}
.studioCol {flex: 1 0 70%;max-width: 70%;display: flex;flex-wrap: wrap;}
.careerCol {flex: 1 0 0;}
.stuCol.stHead,.caHead {flex: 1 0 100%;max-width: 100%;font-size: 22px;color: #fff;font-family: var(--title2SemiBld);margin-bottom: 1em;}
.stuCol {flex: 1 0 0;}
.studioCol ul {list-style: none;padding: 0;}
.studioCol ul li a {font-size: 18px;color: #fff;font-family: var(--title2SemiBld);line-height: 36px;}
.studioCol .stuCol:last-child {flex: 1 0 50%;max-width: 50%;}
.stuCol p,.caCol p {font-size: 18px;color: #fff;font-family: var(--title2SemiBld);}
.footerRow .studioCol:first-child {border-right: 1px solid #eee;padding-right: 2em;}
.nwsTxt {padding: 10px 25px;font-size: clamp(13px,2vw,20px);text-align: center;margin-bottom: 10px;width: min(260px, 90%);font-family: var(--title2SemiBld); width: 100%;}
.nwsBtn {text-align: center;padding: 10px 25px;border: 1px solid #fff;width: min(260px, 90%);border-radius: 0;font-family: var(--title2SemiBld);font-size: clamp(14px,2vw,24px); width: 100%;}
.nwsBtn::before{background: #000;}
.nwsBtn:hover,.nwsBtn:focus{background: #000; color: #fff;}
.joinBtn {font-size: clamp(13px,2vw,24px);color: #fff;   font-family: var(--title2SemiBld);display: flex;gap: 5px;}
.joinBtn:hover{color:#fff; opacity: .7; text-decoration: none;}
.joinIcon{background: url(../images/joinArrow1.png) no-repeat scroll center center; display: block;width: 56px;height: 38px;background-size: contain;}

.joinBtn1 {font-size: clamp(5px,2vw,16px); color:var(--themeTxt);   font-family: var(--title2SemiBld);display: flex;gap: 5px;}
.joinBtn1:hover{color:var(--themeTxt); opacity: .7;}

.joinIcon1{background: url(../images/arrow-rightTi.png) no-repeat scroll center center; display: block;width: 26px;height: 23px;background-size: contain;}

.joinIcon2{background: url(../images/arrow-right.png) no-repeat scroll center center; display: block;width: 26px;height: 35px;background-size: contain;}

p.footerCpyWt {  color: #fff;  font-size: 14px;  text-align: center; margin-bottom: 0;}
.ftrCpySec{padding-top:10px;}
.footerCopy { padding: 2em;}
.footerCopy {display: flex;}
.fterLeft,.fterRight {display: flex;align-items: center;}
.fterLeft{flex: 1 0 70%;}
.fterRight{flex: 1 0 30%;}
.footerCopy ul {list-style: none;padding: 0;display: flex;gap: 8px;margin: 0;}
.fterLeft ul li,.fterLeft ul li a {color: #fff;}
.fterLeft ul li {padding: 0 5px 0 0;border-right: 1px solid #fff;line-height: 15px;}
.fterLeft ul li:last-child {border: navajowhite;}
.fterRight {display: flex;justify-content: flex-end;}
.footerSocial i {color: #fff;font-size: 27px;}
.footerSocial li:hover{opacity:.7;}

.card__content figure {
    margin: 0 0 0rem !important;
}
/*.innerHeader{background:#101115; opacity:.7;}*/
.innerHeader{background:none;}
.innerHeaderPad {margin-top: 1em;}

.workTabs .nav-tabs {justify-content: center;margin: 2em 0 8em;border: none;}
.workTabs .nav-tabs .nav-item.show .nav-link, .workTabs .nav-tabs .nav-link.active {border: 1px solid #600a93;background: var(--themeBg);color: #fff;}
.workTabs .nav-tabs .nav-link {border: 1px solid #600a93;padding: 10px 35px;border-radius: 0;margin: 10 10px;font-size: clamp(13px,2vw,20px);text-transform: uppercase;font-family: var(--title2SemiBld); margin-top:15px; }

.featureRow {display: flex;margin-bottom: 6em;}
.featureRight {flex: 0 0 20%;}
.blgLi ul {list-style: none;padding: 0;margin: 0;display: flex;flex-direction: column;gap: 10px;}
.blgLi li a {font-size:clamp(14px,2vw,21px);text-transform: uppercase;font-family: var(--title2Regular);}
.blgLi ul li.active a, .blgLi ul a.active {color: var(--themeBg);text-decoration: underline;}
.featureLeft {flex: 1 0 0;padding-right: 4em;}

.blogBx {display: flex;gap: 20px;margin-bottom: 2em; position: relative;}
.blogBxLeft figure{overflow: hidden; position: relative;}
.blogBxLeft img {max-width: 100%;}
.blogBxLeft {flex: 1 0 43%;max-width: 43%;}
.blogBxRight h2 {font-size: clamp(20px, 2vw, 32px);text-transform: uppercase;font-family: var(--title2SemiBld);border-bottom: 1px solid #600a93;padding-bottom: 10px;}
.readMr {color: var(--themeBg);display: block; font-size: clamp(14px,2vw,20px); text-transform: uppercase; text-align: left; display: flex; justify-content: flex-end;font-family: var(--title2SemiBld);}
.blogBx:hover .imgHoverCont {opacity: 1;transform: translate3d(0px, 0, 0px) scaleX(1);} 

.contactRw {display: flex;gap: 30px;}
.contFAQSec{background: url(../images/contactImg.jpg) no-repeat scroll center center;background-size: cover;height: 100vh; }
.contactLeft {flex: 1 0 30%;max-width: 30%;    padding: 3em; padding-top:7em;display: flex;
flex-direction: column;  width: 32em; z-index: 10;}
.contMapSec iframe {width: 100%;height: 500px;margin: 0;padding: 0;}
.contMapAddressSec {background: var(--themeBg);display: flex;color: #fff;padding: 20px;gap: 20px;align-items: center;margin-top: -7px;}
.contAddresRight p {color: #fff;font-size: clamp(16px,2vw,20px);margin: 0;}
.contIconLeft i {font-size: 56px;}
.contactRight {flex: 1 0 0;background: #fff; padding: 2em; box-shadow: 0px 2px 3px 3px #efefef;margin-left: 14em;margin-left: clamp(0em, 11vw,14em);height: 100%;margin-top: 11em;margin-top: auto;
margin-bottom: auto;position: relative;right: 0;top: 2.4em;max-width: 40%;margin: auto;flex: 0 0 800px;min-width: 600px;margin: auto;}
.formGrid {margin-top: 3em;}
.formGrid .form-control {border: none;border-bottom: 1px solid #ddd;border-radius: 0;padding-left: 5px;}
.formGrid .form-control:focus {box-shadow: none;}
.col2 {display: flex;gap: 15px;max-width: calc(100% - 15px);}
.col2 .form-group {flex: 1 0 50%;max-width: 50%;}
.contcFrmBtm {display: flex;justify-content: space-between;}
.contNosSec ul {list-style: none;padding: 0;margin: 0;}
.contNosSec ul li {font-size: 19px;display: flex;gap: 15px;}
.contcFrmBtm .learnMrBtn{text-transform: none;}
.contactPg {padding-top:0;padding-bottom: 0;}
.contFAQSec .hdSecConComman h1{color:#fff;}



.abPageSec .carousel-caption h4 {font-size: clamp(16px,3vw,48px);line-height: 56px;}
.ourApprochSec .headingSec h1 {font-size: clamp(16px,3vw,49px);line-height: normal;}
.collapseSec {width: 80%;margin: 0px auto;}
.collapseHead .colcount {font-family: var(--mainTitle1);}
.collapseHead .colCount {font-family: var(--mainTitle1);font-size: clamp(16px,3vw,45px);color:#fff;}
.collapseHead {display: flex;gap: 20px;align-items: center;border-bottom: 1px solid #ddd;padding-bottom: 10px;margin-bottom: 10px; cursor: default;}
.collapseHead h3 {font-size: clamp(16px,3vw,39px);font-family: var(--mainTitle1);text-transform: initial;color: #fff;line-height: normal;}
.collapseHead i {font-size: 30px;cursor: pointer;color:#fff;}
.collaContent {display: none;}
.collapseBx {margin-bottom: 2em;}
.collapseHead i:hover,.collapseHead i:focus {opacity: .7;}

.ourPrtnerSec {margin-top: 6em;}
.clientPBox { display: flex;align-items: center;justify-content: center;padding: 10px;}
.ourPrtnerSec .headingSec h1 {font-size: clamp(16px,3vw,49px); text-align:center}
.ourPrtnerSec .headingSec h4 {text-align: center;}
.clientPBox img{max-width:100%;}

.ourTeamSec{margin-top:5em;}
.oTeamRw {display: flex;gap: 60px;margin-top: -2em; margin-left:4em;}
.oTeamRw .oTeamBx:first-child {margin-top: 3em;}
.oTeamRw .oTeamBx:nth-child(2) {margin-top: 3em;}
.oTeamBx img {max-width: 100%;}
.oTeamBx h5 {font-size: clamp(14px,2vw,19px);}

.servicePgContent h5{width: min(400px, 80%);}
.ourApprRow {display: flex;flex-wrap: wrap;}
.ourApprBx {flex: 1 0 0;padding: 10px 20px;}
.ourApprBx .icon i {font-size: 7em;color: #600a93;}
.ourApprBx {text-align: center;}
.ourApprBx .icon { margin-bottom: 1em;}
.ourApprBx p {font-size: 16px;}
.ourApprBx h5 { text-transform:none;}

.cusSegSec {background: #eee;padding: 2em;padding-bottom: 4em; margin-bottom: 2em; background: url(../images/Service%20Page%20BG%2002.jpg) no-repeat scroll center center; background-attachment: fixed;}
.cutomerSegSec { margin-top: 5em;}
.cusSegRow {display: flex;gap: 35px;flex-wrap: wrap;}
.cusSegBx { flex: 1 0 0; background: #600a93; padding: 20px; color: #fff; border-radius: 17px;}
.cusSegBx .icon i { font-size: 3em;}
.cusSegBx .icon { margin-bottom: 1em;}
.cusSegBx h5 { color: #fff;}
.cusSegBx p { color: #e1e1e1; font-size: 20px;}
.cutomerSegSec .headingSec h4,.cutomerSegSec .headingSec h1,.cutomerSegSec .headingSec p { color: #fff;}

.indusRow {display: flex; flex-wrap: wrap;justify-content: center;gap: 20px;}
.indusBx { flex: 1 0 30%; max-width: 33.333%; padding: 20px;background: #efefef;border-radius: 10px;display: flex;gap: 10px;}
.indLeft .icon i {font-size: 30px;color: #600a93;}
.indusBx p {font-size: 20px; color: #333;}
.indusBx h5 { color: #000;}


.testimonialSec {margin-top: 5em;background: #eee;padding: 3em;}
.testiRow {display: flex;gap: 20px;width: 80%;margin: 0px auto;}
.testiRow .textiLeft {flex: 1 0 200px;max-width: 200px;border-radius: 100%;height: 200px;}
.textiLeft img {width: 100%;border-radius: 100%;height: 100%;object-fit: cover;}
.textiLeft figure {margin: 0;border-radius: 100%;width: 200px;height: 200px;}
.textiRight {flex: 1 0 0;}
.textiRight .quoteSy {font-size: 7em;display: block;height: 47px;line-height: 82px;font-family: sans-serif;color: #600a93;}
.textiRight h5 {color: #000;}
.textiRight p {color: #333;font-size: 20px;}

.wtWedoSecPg { padding-top: 5em;}

.industrySpprtSec .ideSecCol figcaption { width: min(80%,100%);}
.flxW2nd { max-width: 34% !important;}
.whtWeDoBx .prContBx { margin-bottom: 15%;}

.contactFAQ {width: 100%;margin-left: 0;margin-top: 4em;}
.contactFAQ .collapseHead .colCount, .contactFAQ .collapseHead h3 { font-size: clamp(16px,2vw,20px);}
.contactFAQ .collapseHead i {font-size: 22px;}
.contactFAQ p{font-size: clamp(13px,2vw,17px); color: #fff;}
.cMultyCo {display: flex;flex-wrap: wrap; gap: 5px;}


.menuOpRe{position: relative;}
.close-container{ position: absolute; margin: auto;right: 1.5em;top: 0;cursor: pointer;}
.leftright{ height: 4px; width: 35px; position: absolute; margin-top: 24px; background-color: #fff;border-radius: 2px;transform: rotate(45deg);transition: all .3s ease-in;}
.rightleft{  height: 4px;width: 35px; position: absolute;margin-top: 24px;background-color: #fff;border-radius: 2px;transform: rotate(-45deg);transition: all .3s ease-in;}
.closeM{color: white; font-family: Helvetica, Arial, sans-serif;  font-size: 10px; text-transform: uppercase;letter-spacing: 2px;transition: all .3s ease-in;  opacity: 0;}
.closeM{  margin:51px 0 0 -2px;position: absolute;}
.close-container:hover .leftright{transform: rotate(-45deg);background-color:  #F25C66;}
.close-container:hover .rightleft{  transform: rotate(45deg);  background-color:  #F25C66;}
.close-container:hover label{opacity: 1;}

.abTpImgSc {display: flex; gap: 2em;margin-top: 4em;}
.abTpImgLeft,.abTpImgRight { flex: 1 0 50%; max-width: 49%;}
.abTpImgRight img {height: 65%; width:130%;}
.abTpImgRight {position: relative;}
.abTpImgLeft .headingSec {margin: 0;}
.abTpImgSubRw {display: flex;gap: 2em;margin-top: 2em;}
.abTpImgSubCol {flex: 1 0 50%;max-width: 49%;}
.abTpImgSubCol i {font-size: 2em;color: var(--themeBg);margin-bottom: 15px;}
.abTpImgSubCol h3 {font-size: 21px;color: #000;text-transform: none;}
.abTpImgSc p {font-size: 16px;}


.servicehead h4{padding-top:120px; font-size:24px; line-height:32px; }
.servicehead h1{font-size:100px; 
                line-height:108px;
               color:var(--themeTxt);
			   }

.mission {
	background-image:url(../images/industra%20Mission_Vision.png);
	background-repeat:no-repeat; 
	background-position:center; 
	padding-bottom:30px;
	
	}
.mission1 {padding-right:100px;}
.vision {padding-left:130px;  padding-top:90px;}
.values {margin-top:650px;}	
	

@media (max-width: 1600px) { 

    .learnMrBtn{padding: 8px 20px;font-size: 18px;}
    .abSliderSec .carousel-caption p {  font-size: clamp(12px,2vw,16px);}
    .abSliderSec .carousel-caption h4{font-size: clamp(25px,4vw,48px);line-height: 56px;}
    .abPageSec .carousel-caption h4{font-size: clamp(25px,3vw,32px);line-height: initial;}
	
	.carousel-caption1 h4{font-size: clamp(25px,3vw,42px);line-height: initial;}

}

@media (max-width: 1280px) { 

 .abTpImgLeft,.abTpImgRight { flex: 1 0 50%; max-width: 49%;}
 .abTpImgRight img {height: 60%; width:110%;}

}


@media (max-width: 1199.98px) { 
.logo{width:25%;} 

.carousel-caption h3{font-size:33px;}
.carousel-caption h4{font-size:26px;}
.carousel-caption{height:115px;}

.carousel-caption1 h4{font-size:26px;}


.leftArTi,.imgRightGrid .leftArTi{width:60px;}
.btnRow{margin:2em auto;}
.hmSerLeft li::before{height:8px; margin-top:11px;}
.abSliderSec .carousel-indicators li{width:10px; height: 10px;}
.abSliderSec .carousel-indicators{bottom:4em;}
.abSliderSec .carousel-caption p {font-size: clamp(12px,2vw,15px);}
.abPageSec .carousel-caption h4 {font-size: clamp(25px,1vw,28px);}
.carousel-caption1 p {  font-size: clamp(8px,2vw,10px);}

.carousel-caption1 h4 {font-size: clamp(25px,1vw,28px);}


.servicehead h1{ font-size:80px; 
               
			   }
			   
.mission {
	background-image:none;
	
	padding-bottom:30px;
	
	}	
.mission1 {padding-right:0px;}
.vision {padding-left:10px;  padding-top:10px;}
.values {margin-top:10px;}			   

 }

@media (max-width:1000px) {


}

@media (max-width: 991.98px) {

h1{font-size:25px;}
.container.carousel-caption {padding: 15px;}
.abSliderSec .carousel-caption h4{font-size: 26px; line-height: normal; margin-bottom:5px;}
.abSliderSec .carousel-caption h5{font-size: 14px;margin-bottom: 3px;}
.learnMrBtn{font-size: 13px;}
.abSliderSec .carousel-caption p{font-size: 13px;}
.collapseHead i{font-size: 20px;}

.carousel-caption1 h4{font-size: 26px; line-height: normal; margin-bottom:5px;}

.ourApprBx { flex: 1 0 50%;}
.cusSegBx{ flex: 1 0 45%;}
.indusBx { flex: 1 0 46%; max-width: 50%;}
.abPageSec .carousel-caption h4 { font-size: clamp(14px,2vw,19px);}

.contactRw{flex-direction: column;}
.contactLeft,.contactRight{flex: 1 0 100%; max-width: 100%; margin: 0;}
.contactLeft{width:100%;}
.contactRight { min-width: 300px; max-width: 100%; margin: 0 3em;}

.servicehead h1{ font-size:60px; }

.abTpImgSc{flex-direction: column;}
.abTpImgLeft, .abTpImgRight { flex: 1 0 100%; max-width: 100%;}
.abTpImgRight img {height: 100%; width:100%;}

.mission {
	background-image:none;
	
	padding-bottom:30px;
	
	}	
.mission1 {padding-right:0px;}
.vision {padding-left:20px;  padding-top:10px;}
.values {margin-top:10px;}



 }
 
 
 
 
@media (max-width: 767.98px) { 
.logo { flex: 1 0 130px;  max-width: 125px;}
.logo img{max-width:100%;}
.headerSec{height:70px;}
.carousel-item img{height:100%;}
.carousel-indicators{left:0;}
.carousel-indicators li{width:70px;}
.menuItemsOpen ul li a{font-size: 22px; padding:4px;}
.menuClose{font-size: 20px;}
.menuOpCol,.menuOpRw,.menuOpRe{height: 100%;}
.menuItemsOpen ul{display: flex;flex-direction: column;height: 100%;align-items: center;justify-content: space-around;}
.abSliderSec .carousel-indicators li{width:5px; height:5px;}
.abSliderSec .carousel-indicators{bottom:4em;}
.abSliderSec .carousel-indicators{display: none;}

.abSliderSec .carousel-item{max-width:100%;}
.abSliderSec .container.carousel-caption {width: 100%;max-width: 100%;left: 0;right: 0;    position: unset;
    z-index: 100; background: #eee;
    margin-top: 54%; margin-bottom:0;}
    .abSliderSec .carousel-indicators{display: none;}


.contMapSec iframe{height: 300px;}
.headingSec h1, .hdSecConComman h1{line-height: normal;}
.ourApprBx,.cusSegBx,.indusBx { flex: 1 0 100%;max-width: 100%;}
.testiRow {flex-direction: column;justify-content: center; text-align: center;}
.textiLeft{margin: 0px auto;}
.contcFrmBtm { flex-wrap: wrap;  gap: 20px;}

.abTpImgSc{flex-direction: column;}
.abTpImgLeft, .abTpImgRight { flex: 1 0 100%; max-width: 100%;}
.abTpImgRight img {width: 100%; height: 100%;}


.servicehead h1{ font-size:40px; 
               
			   }
			   
.mission {
	background-image:none;
	
	padding-bottom:30px;
	
	}	
.mission1 {padding-right:0px;}
.vision {padding-left:20px;  padding-top:10px;}
.values {margin-top:10px;}		   
 
 }
 
 
 
 @media (max-width: 575.98px) { 

.mobileview { display:none;}


.footerMenu ul{ align-items: center; padding:0;}
.footerMenu ul li a::before{display: none;;}
.frRow{flex-direction: column;}
.topLog{display: none;}
.footerRow{flex-direction: column;}
.footercol { background: #fff; margin-bottom: 2px;padding: 10px;}
.hmSerRow {flex-direction: column;}
.hmSerLeft { flex: 1 0 100%; max-width: 100%;}
.TwoColGridRow { margin-bottom: 0.5em;gap: .5em;}

.ideSecRow {grid-template-columns: 1fr;}
.insideCol-1{padding-right:0; margin-top:2em;}
.ideSecCol.ideTxt {padding-top: 1em; padding-bottom: 1em;}

/*project sec Mob */
.mainGridRow { padding-right: 0em; flex-direction: column; padding:10px;}
.TwoColGridRow{flex-direction: column;}
.img-2Flex{max-width:100%;}
.img-1Flex {flex: 1 0 100%;max-width: 100%;}
.leftArTi, .imgRightGrid .leftArTi{display: none;}
.prContBx { margin-bottom: 10px;}
.imgRightGrid .pr1Col-2 {text-align: left; order: 2;}
.imgRightGrid .pr1Col-1{max-width:100%; flex:1 0 100%;}
.imgRightGrid{padding:10px; margin:0;}
/*project sec Mob end*/


.getTchBtn{padding:10px;}
.footerRow .studioCol:first-child{border:none;}
.studioCol{max-width:100%; flex: 1 0 100%;}
.studioCol .stuCol:last-child{max-width: 100%;}
.joinIcon {width: 35px;height: 25px;}
.studioCol ul li a,.stuCol p, .caCol p{font-size: 14px;}
.stuCol {flex: 1 0 50%; max-width: 50%;}
.footerCopy { flex-direction: column;}
.footerCopy ul {flex-direction: column;justify-content: center;align-items: center;width: 100%; gap:15px;}
.fterLeft ul li{border: 0;}
ul.footerSocial { flex-direction: row; margin-top: 2em;}
.innerHeaderPad{margin-top:1em;}
.workTabs .nav-tabs{margin:1em 0 2em;}
.workTabs .nav-tabs .nav-link{margin:10 5px; padding:5px 15px;}
.headingSec{margin-bottom:2em;}

.featureRow{flex-direction: column; margin-bottom: 1em;}
.featureLeft,.featureRight{flex: 1 0 100%; padding: 0;}
.blogBx{flex-direction: column;}
.blogBxLeft,.blogBxRight{flex:1 0 100%; max-width: 100%;}

.oTeamRw {flex-direction: column; gap: 15px;}
.flxW2nd { max-width: 100% !important;}
.contNosSec ul li{font-size: 15px;}
.contactRight{padding:1em;}


.abTpImgRight img {height: 100%; width:100%;}

.servicehead h1{ font-size:40px; 
               
			   }
			   
			   .mission {
	background-image:none;
	
	padding-bottom:30px;
	
	}	

 }
 



.flip{
    box-sizing: content-box;
    height: 70px;
    padding: 30px 30px;
    display: flex;
    border-radius: 8px;
   
}
 
 .words{
    overflow: hidden;
}
 
 .span1{
    
    color: #0e6ffc;
    animation:infinite;
}
@keyframes spin_words{
    30%{
        transform: translateY(-8%);
    }
    
    100%{
        transform: translateY(-95%);
    }
    
}
 
.worktop{
	    
		background-image:url(../images/Work%20Title%2005.jpg); 
		background-size:100%;
		background-repeat:no-repeat;
		 height:560px;		 
	
	}
.worktop1{
	   position:absolute; 
	   top: 230px; 
	   right:50px; 
	   left:-50px;  
	   align-content:center;
	   } 

.worktop2{
	background-color:#fff; 
    text-align: left; 
	margin-bottom: 5em; 
	display: block;  
	max-width: 700px; 
	padding: 4em;   
	height: 400px;
	}	   



.carousel-caption1 { text-align: left;margin-bottom: 14em; left: 0;  right: 0;}
.carousel-caption1 h4 {text-transform: uppercase;letter-spacing: 2px;}
.carousel-caption1 h3{font-size: 48px; color: white; font-family: 'OptimaMedium'; margin:0;}

.carousel-caption1 { display: block;  max-width: 600px;  left: -23%;  height: 135px;}
.carousel-caption1 h4 {color: #000; font-family: var(--fontBold);  margin: 0;}


.carousel-caption1 h5 {font-family: var(--title2SemiBld);font-size: clamp(10px,3vw,24px); line-height:32px;}
.carousel-caption1 h4 {font-family: var(--mainTitle1);text-transform: capitalize;color: #000;margin-bottom: 19px;font-size: clamp(25px,4vw,48px);line-height: clamp(33px,4vw,56px);}
.carousel-caption1 p {font-size:16px; line-height: 24px;}

.carousel-caption1 h4 {font-size: clamp(16px,4vw,48px);line-height: 56px;}
 
 


.testiRow1 {display: flex;gap: 20px;width: 100%;margin: 0px auto;}
.testiRow1 {max-width: 200px;border-radius: 100%;height: 200px;}




.about h3 {
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 20px;
  font-family: var(--font-secondary);
}

.about .call-us {
  left: 10%;
  right: 10%;
  bottom: 0;
  background-color: #fff;
  box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.08);
  padding: 20px;
  text-align: center;
}

.about .call-us h4 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 5px;
}

.about .call-us p {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding: 0 0 10px 30px;
  position: relative;
}

.about .content ul i {
  position: absolute;
  font-size: 20px;
  left: 0;
  top: -3px;
  color: var(--color-primary);
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--color-primary) 50%, rgba(0, 131, 116, 0.4) 52%);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
  overflow: hidden;
}

.about .play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(0, 131, 116, 0.7);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.about .play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.about .play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.about .play-btn:hover:after {
  border-left: 15px solid var(--color-primary);
  transform: scale(20);
}

.oTeamFooter {display: flex;gap: 30px;margin-top: -2em;}

.carousel-caption1 p {  font-size:19px;}

.vertline {border-right: 1px solid #eee;padding-right: 2em;}






:root {
	--card-height: 40vw;
	--card-margin: 4vw;
	--card-top-offset: 2em;
	--numcards: 5;
	--outline-width: 0px;
}



#card_1 {
	--index: 1;
}

#card_2 {
	--index: 2;
}

#card_3 {
	--index: 3;
}

#card_4 {
	--index: 4;
}

#card_5 {
	--index: 5;
}



.card11 {
	position: sticky;
	top: 0;
	padding-top: calc(var(--index) * var(--card-top-offset));
}

@supports (animation-timeline: works) {

	@scroll-timeline cards-element-scrolls-in-body {
		source: selector(body);
		scroll-offsets:
			/* Start when the start edge touches the top of the scrollport */
			selector(#cards) start 1,
			/* End when the start edge touches the start of the scrollport */
			selector(#cards) start 0
		;
		start: selector(#cards) start 1; /* Start when the start edge touches the top of the scrollport */
		end: selector(#cards) start 0; /* End when the start edge touches the start of the scrollport */
		time-range: 4s;
	}

	.card11 {
		--index0: calc(var(--index) - 1); /* 0-based index */
		--reverse-index: calc(var(--numcards) - var(--index0)); /* reverse index */
		--reverse-index0: calc(var(--reverse-index) - 1); /* 0-based reverse index */
	}
	
	.card__content {
		transform-origin: 50% 0%;
		will-change: transform;

		--duration: calc(var(--reverse-index0) * 1s);
		--delay: calc(var(--index0) * 1s);

		animation: var(--duration) linear scale var(--delay) forwards;
		animation-timeline: cards-element-scrolls-in-body;
	}

	@keyframes scale {
		to {
			transform:
				scale(calc(
					1.1
					-
					calc(0.1 * var(--reverse-index))
				));
		}
	}
}

/** DEBUG **/

#debug {
  position: fixed;
  top: 1em;
  left: 1em;
}
#debug::after {
  content: " Show Debug";
  margin-left: 1.5em;
  color: white;
  white-space: nowrap;
}

#debug:checked ~ main {
  --outline-width:1px;
}


/** PAGE STYLING **/

* { /* Poor Man's Reset */
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}



header1,
main {
	width: 80vw;
	margin: 0 auto;
}

header1 {
	
	display: grid;
	place-items: center;
}

#cards {
	list-style: none;
	outline: calc(var(--outline-width) * 10) solid blue;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(var(--numcards), var(--card-height));
	gap: var(--card-margin);
}

.card11 {
	outline: var(--outline-width) solid hotpink;
}

.card__content {
	box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1);
	background: rgb(255, 255, 255);
	color: rgb(10, 5, 7);
	border-radius: 1em;
	overflow: hidden;

	display: grid;
	grid-template-areas: "text img";
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;

	align-items: stretch;
	outline: var(--outline-width) solid lime;
}

.card__content > div {
	grid-area: text;
	width: 80%;
	place-self: center;
	text-align: left;

	display: grid;
	gap: 1em;
	place-items: start;
}

.card__content > figure {
	grid-area: img;
	overflow: hidden;
	object-fit: cover;
	margin:0px !important;
}

.card__content > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
figure {
    margin: 0px 0 0rem;
}




#topbutton {
  display: inline-block;
  background-color: var(--themeBg);
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#topbutton::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#topbutton:hover {
  cursor: pointer;
  background-color: #333;
}
#topbutton:active {
  background-color: #555;
}
#topbutton.show {
  opacity: 1;
  visibility: visible;
}

/* Styles for the content section */

.content {
  width: 77%;
  margin: 50px auto;
  font-family: 'Merriweather', serif;
  font-size: 17px;
  color: #6c767a;
  line-height: 1.9;
}
@media (min-width: 500px) {
  .content {
    width: 43%;
  }
  #topbutton {
    margin: 30px;
  }
}