* { padding: 0; margin: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
:root { --white: #ffffff;--black: #f7efef;--light-t1:#01fee9;--text-color-1:rgba(255, 255, 255, 0.796);--text-color-2:rgba(154, 119, 35, 1);--text-color-3:rgba(3, 140, 54, 1);--text-color-4:#ffffff;--text-color-5:#ffffff;--text-color-6:#0ec6e6;--text-color-7:#9A7723;--text-color-8:#EAA742;--text-color-9:#E9A742;--text-color-10:#C4893B;--text-color-11:#FFE0B7;--text-color-12:#DFA650;--text-color-13:#FFCA79;--border-color-2:#6B5536;--text-color-14:#038C36;--text-color-15:#04BC49;--text-color-16:#01AB3F;--text-color-17:#0e0e0e;}
body {font-family:'VALORANT';font-size: 12px;line-height:18px; font-weight: 400; font-style: normal; width: 100%; height: 100%; padding: 0; margin:auto; max-width:2560px;background:var(--white);color:var(--text-color-1);}
a { text-decoration: none; outline: none; color: var(--text-color-1); cursor: pointer; }
a:hover { color: var(--text-color-1); }
a, a:active, a:focus { outline: none; text-decoration: none; }
img{border:none;max-width:100%;height:100%;object-fit:cover;object-position:center center;}
ul,li{ padding:0; margin:0; }

.custom-container{ padding: 0 32px; margin:0 auto; }

h1{ font-family: 'Insomnia', sans-serif; font-size: 86px; font-style: normal; font-weight: 400; line-height: 104px; letter-spacing: 5.16px; background: linear-gradient(180deg, #00ebfc 0%, #01a2ff 90%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
h5{ font-size: 18px; font-style: normal; font-weight: 400; line-height: 22px; letter-spacing: 10.8px;color:var(--text-color-5); text-transform:uppercase; }
h6{font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: 18.48px; color:var(--text-color-4); }

/* -- Common Element CSS End -- */

/* -- Cursor CSS Start -- */

.cursor{ position: fixed; width: 40px; height: 40px; margin-left: -20px; margin-top: -20px; border-radius: 50%; border: 2px solid var(--text-color-6); transition: transform 0.3s ease; transform-origin: center center; pointer-events: none; z-index: 1000; }
.header-section-orange .cursor{ border:2px solid var(--text-color-10); } 
.header-section-green .cursor{ border:2px solid var(--text-color-14); } 
.grow, .grow-small{ transform: scale(2); background:var(--white); opacity: 0.5; } 
.grow-small{ transform: scale(2); }

/* -- Cursor CSS End -- */

/* -- Header Section CSS Start -- */

.header-section-main { position: fixed; padding-top: 40px; width: 100%;z-index:99;}
.header-section-inner{display:flex;justify-content:space-between;}
.header-logo{flex-shrink:0;}
.header-logo img{width:60px;height:60px;}
.header-menu{width:80%;}
.header-menu ul{display:flex;gap:90px;justify-content:end;list-style:none;}

.header-menu ul li a { position: relative; font-size: 16px; line-height: 20px; font-weight: 400; text-transform: uppercase; font-style: normal; color: var(--text-color-1); display:inline-block; transition: 0.3s; -webkit-transition: 0.3s;} 
.header-menu ul li a:hover,.header-menu ul li.active a{ color:var(--light-t1); }
.header-menu ul li a:hover:after,.header-menu ul li.active a:after{ transform: translate(-50%,0); -webkit-transform: translate(-50%,0); opacity:1; } 
.header-menu ul li a:after{ content:""; position:absolute; bottom:-50px; left:50%; display:block; background:url("icons8-valorant-64.png") center center / cover; width:70px; height:70px; transform:translate(-50%,30px); -webkit-transform:translate(-50%,30px); transition: 0.3s; -webkit-transition: 0.3s; opacity:0; }

.header-right-icon{flex-shrink:0;}
.header-right-icon img { width: 21px; height: 8px; }

.header-section-orange .header-logo img { filter:hue-rotate(160deg); } 
.header-section-orange .header-menu ul li a{ color:var(--text-color-7); } 
.header-section-orange .header-right-icon img { filter: hue-rotate(141deg); } 
.header-section-orange .header-menu ul li a:hover, .header-section-orange .header-menu ul li.active a {color:var(--text-color-8);}

.header-section-green .header-logo img { filter:hue-rotate(197deg); } 
.header-section-green .header-menu ul li a{ color:var(--text-color-14); } 
.header-section-green .header-right-icon img { filter: hue-rotate(217deg); } 
.header-section-green .header-menu ul li a:after { background:url(https://www.yudiz.com/codepen/valorant-characters/menu-hover-icon-3.svg) center center / cover; }
.header-section-green .header-menu ul li a:hover, .header-section-green .header-menu ul li.active a {color:var(--text-color-14);}

/* -- Header Section CSS End -- */

/* -- Banner Section CSS Start -- */

.banner-section-main{position:relative;z-index:9;overflow: hidden;}
.banner-section-main .banner-section-loop{position: relative; padding-top:42px;display:flex;align-items:center;background:no-repeat top center / 100% 100%; width:100%;height:100vh;gap:20px;}
.banner-left-vertical-main { width:calc(7% - 6.66px);display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:40px;} 
.banner-main-img { width:calc(53% - 6.66px); align-self:end;max-height:865px;} 
.banner-content-main{ width:calc(28% - 6.66px); padding-top:70px;} 
.controller-right-icons-main { width:calc(12% - 15px);padding-right:15px;position:absolute;top:50%;right:0;transform:translateY(-50%);-webkit-transform:translateY(-50%);z-index:9999;}
.controller-right-icons-main img{ width:62px; height:62px;margin-left: auto;margin-bottom:34px;cursor: pointer; transition: 0.3s; -webkit-transition: 0.3s;}
.controller-right-icons-main .slick-track{width:100% !important;display:flex;flex-wrap:wrap;}
.controller-right-icons-main .slick-slide{width:100%;}

.banner-left-vertical-main h6{ writing-mode:vertical-rl; text-orientation:mixed;} 
.banner-left-vertical-main img{ width:70px; height:70px;} 
.banner-content-main h5{ padding-bottom:12px;} 
.banner-section-loop .banner-content-main h1{display: inline-flex; padding-bottom:28px;}

.controller-box-section { border: 1px solid var(--text-color-6); background: linear-gradient(180deg, rgba(4, 203, 248, 0.455) 0%, rgba(5, 230, 246, 0.09) 100%); padding: 19.771px 22.218px 20.229px 22.799px; display:flex; gap:15px; margin-bottom: 14px;} 
.controller-box-img{ width:50px; height:50px; flex-shrink:0; } 
.banner-content-main .controller-box-content h5{ letter-spacing:normal; padding-bottom:6px; } 
.controller-icons-main { display: flex; gap: 18px; padding-bottom:45px; } 
.controller-icons-inner { border: 1px solid var(--text-color-6); flex: 1;} 
.controller-img { padding:18px; text-align:center;} 
.controller-img img{aspect-ratio:1/1;width:100%; height:100%;margin: 0 auto; } 
.controller-icons-inner p{ font-size:14px; line-height:16px; color:#b1e7e4; text-transform:uppercase; text-align:center; padding:3px; border-top: 1px solid var(--text-color-6); background: linear-gradient(180deg, rgba(0, 255, 251, 0.319) 0%, rgba(0, 183, 255, 0.903) 100%);} 
.banner-section-loop .view-contract-btn-main{position:relative;display:block;background:url("Diseño\ sin\ título\ \(31\).png") no-repeat center center / cover;width:285px;height:65px;z-index: 1;cursor:pointer;}
.banner-section-loop .view-contract-btn-main a{font-size:18px; line-height:22px; text-transform:uppercase; color: #CCC4ED;position:absolute;top:50%;left:40%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);display:block;}
.banner-main-img .main-img{ position: relative;padding-top:78%;width:100%;z-index:1;transition: 0.3s;-webkit-transition: 0.3s;transform: translate(-50%,10%)!important;-webkit-transform: translate(-50%,10%) !important;left:65%;}
.banner-main-img .main-img.character-animation{animation:character-animation 2s ease-in-out 1;}
.banner-main-img img{ position:absolute !important; bottom:0; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%);height:100%;display:block;}

.controller-right-icons-main .slick-current.slick-active img,.controller-right-icons-main .slick-active img:hover{ filter: drop-shadow(6px 6px 6px var(--text-color-4)); } 
.controller-right-icons-main .slick-current.slick-active:nth-child(3n+2) img,.controller-right-icons-main .slick-active:nth-child(3n+2) img:hover{ filter: drop-shadow(6px 6px 6px var(--text-color-12)); } 
.controller-right-icons-main .slick-current.slick-active:nth-child(3n+3) img,.controller-right-icons-main .slick-active:nth-child(3n+3) img:hover{ filter: drop-shadow(6px 6px 6px var(--text-color-14)); }

/* -- Banner Section CSS End -- */


@media only screen and (max-width: 1600px) {

    /* -- Header Section CSS Start -- */
    
    .header-section-main { padding-top:35px; }
    .header-menu ul li a:after {bottom:-60px;} 

    /* -- Header Section CSS End -- */
    
    /* -- Banner Section CSS Start -- */

    .banner-left-vertical-main { margin-top:0; } 
    .banner-left-vertical-main h6 { letter-spacing:16px; } 
    .banner-left-vertical-main img { width: 60px; height: 60px; }
    .banner-content-main h5 { font-size:16px; line-height:20px; }
    .banner-section-loop .banner-content-main h1 { font-size:70px; line-height:80px; } 
    .banner-section-loop .banner-content-main h1 { padding-bottom: 24px; } 
    .controller-box-img { width: 45px; height: 45px; } 
    .controller-box-section { padding:15px; margin-bottom: 12px; } 
    .controller-img { padding: 14px; }
    .controller-icons-main { gap:16px; padding-bottom: 35px; } 
    .banner-section-loop .view-contract-btn-main a { font-size:16px; line-height:20px;} 
    .controller-right-icons-main img { width:55px; height:55px; margin-bottom:25px; }

    /* -- Banner Section CSS End -- */

}